fuliqi
2024-04-03 7f356bf22e4fe731e2b79ca3877e7c702eaf0704
src/views/system/work-order/index.vue
@@ -10,6 +10,12 @@
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="故障类型" prop="workOrderNo">
        <el-select v-model="queryParams.errorType" placeholder="故障类型" clearable @clear="handleQuery">
          <el-option label="市政施工" value="市政施工"></el-option>
          <el-option label="设备遗失" value="设备遗失"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运维处理时间">
        <el-date-picker
          clearable
@@ -29,103 +35,64 @@
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['x:work-order:add']"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['x:work-order:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
    <el-row>
      <el-col :span="8" v-for="item in workOrderList" :key="item" style="width: 390px;margin-left: 40px;margin-top:20px;">
        <el-card :body-style="{ padding: '0px' }">
          <el-image :preview-src-list="['https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357']" fit="cover" src="https://img2.baidu.com/it/u=68398439,1553004927&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=357" class="image"/>
          <div style="padding-right: 10px;padding-top: 10px;float: right;">
            <el-row>
              <el-col :span="24" class="time">故障类型:<el-tag size="small" type="danger">市政施工</el-tag></el-col>
            </el-row>
            <el-row class="work-order-item">
              <el-col class="time" :span="24">运维人员:{{ item.ywPeopleName }}</el-col>
            </el-row>
            <el-row class="work-order-item">
              <el-col class="time" :span="24">运维单位:{{ item.unitName }}</el-col>
            </el-row>
            <el-row class="work-order-item">
              <el-col :span="24" class="time">工单编号:{{ item.workOrderNo }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="time">处理时间:{{ item.ywHandleTime }}</el-col>
            </el-row>
            <el-row>
              <el-button
                size="mini"
                type="text"
                @click="handleAuditing(item)"
                v-hasPermi="['work:order:audit']"
              >审核</el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleYwCondition(item)"
              >运维情况</el-button>
              <!--          <el-button-->
              <!--            size="mini"-->
              <!--            type="text"-->
              <!--            @click="handleYwResult(scope.row)"-->
              <!--          >运维结果</el-button>-->
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                @click="handleCheckResult(item)"-->
<!--                v-hasPermi="['work:order:result']"-->
<!--              >检测结果</el-button>-->
              <el-button
                size="mini"
                type="text"
                @click="handleFlow(item)"
              >过程图</el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleReport(item)"
              >事后报备</el-button>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['x:work-order:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="workOrderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="工单号" align="center" prop="workOrderNo" width="170"/>
      <el-table-column label="工单来源" align="center" prop="source" width="170"/>
      <el-table-column label="故障类型" align="center" prop="errorType" width="170"/>
      <el-table-column label="运维单位" align="center" prop="unitName" width="150"/>
      <el-table-column label="运维人员" align="center" prop="ywPeopleName" />
      <el-table-column label="运维处理时间" align="center" prop="ywHandleTime" width="180"/>
      <el-table-column label="处理结束时间" align="center" prop="ywHandleTime" width="180"/>
      <el-table-column label="运维结果" align="center" prop="ywResult" />
      <el-table-column label="运维情况" align="center" prop="ywCondition" width="150"/>
      <el-table-column label="运维检测结果" align="center" prop="ywCheckResult" width="200"/>
      <el-table-column label="审核通过时间" align="center" prop="ywHandleTime" width="200"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
      <el-table-column label="操作" fixed="right" width="150"  align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['x:work-order:edit']"-->
<!--          >修改</el-button>-->
          <el-button
            size="mini"
            type="text"
            @click="handleAuditing(scope.row)"
          >审核</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleYwCondition(scope.row)"
          >运维情况</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleYwResult(scope.row)"
          >运维结果</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleCheckResult(scope.row)"
          >检测结果</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleFlow(scope.row)"
          >过程图</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
@@ -134,6 +101,35 @@
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 事后报备 -->
    <el-dialog title="事后报备" :visible.sync="reportOpen" width="600px" append-to-body>
      <el-form ref="reportForm" :model="reportForm" :rules="reportFormRules" label-width="80px">
        <el-form-item label="点位" prop="pointId">
          <el-input v-model="reportForm.pointId" disabled />
        </el-form-item>
        <el-form-item label="报备类型">
          <el-input v-model="reportForm.reportType" disabled />
        </el-form-item>
        <el-form-item label="故障类型" prop="errorType">
          <el-select v-model="reportForm.errorType">
            <el-option label="市政施工" value="市政施工"/>
            <el-option label="设备故障" value="设备故障"/>
            <el-option label="设备遗失" value="设备遗失"/>
          </el-select>
        </el-form-item>
        <el-form-item label="报备内容" prop="reportContent">
          <editor v-model="reportForm.reportContent" :min-height="192"/>
        </el-form-item>
        <el-form-item label="上报材料" prop="reportMaterials">
          <file-upload v-model="reportForm.reportMaterials"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReportForm">提 交</el-button>
        <el-button @click="reportOpen = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="工单审核" :visible.sync="auditingOpen" width="500px" append-to-body>
      <el-form ref="auditingForm" :model="auditingForm" :rules="auditingRules" label-width="80px">
@@ -231,7 +227,7 @@
      </div>
    </el-dialog>
    <el-dialog title="运维检测结果" :visible.sync="checkResultOpen" width="500px" append-to-body>
    <el-dialog title="运维检测结果" :visible.sync="checkResultOpen" width="550px" append-to-body>
      <el-form ref="ywResultForm" :model="checkResultForm" :rules="checkResultRules" label-width="120px">
        <el-form-item label="工单号" prop="workOrderNo">
          <el-input v-model="checkResultForm.workOrderNo" disabled  />
@@ -243,17 +239,17 @@
          <el-input v-model="checkResultForm.ywPeopleName" disabled />
        </el-form-item>
        <el-form-item label="运维检测结果" prop="ywCheckResult">
          <el-input v-model="checkResultForm.ywCheckResult" type="textarea" maxlength="150" show-word-limit/>
          <file-upload v-model="checkResultForm.ywCheckResult"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitYwResult">确 定</el-button>
        <el-button @click="cancelYwResult">取 消</el-button>
        <el-button @click="cancelCheckResult">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改运维工单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="工单号" prop="workOrderNo">
          <el-input v-model="form.workOrderNo" placeholder="请输入工单号" />
@@ -419,6 +415,22 @@
  },
  data() {
    return {
      reportFormRules: {
        reportContent: [
          { required: true, message: "报备内容不能为空", trigger: "blur" }
        ],
        reportMaterials: [
          { required: true, message: "上报材料不能为空", trigger: "blur" }
        ],
      },
      reportOpen: false,
      reportForm: {
        reportType: "事后报备",
        pointId: "琼于镇3街1号摄像头",
        errorType: "",
        reportContent: "",
        reportMaterials: ""
      },
      // 过程图
      flowOpen: false,
      flowForm: {},
@@ -503,6 +515,23 @@
    this.getList();
  },
  methods: {
    // 报备
    submitReportForm() {
      this.$refs["reportForm"].validate(valid => {
        if (valid) {
          addReport(this.form).then(response => {
            this.$modal.msgSuccess("成功提交报备");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    // 事后报备按钮
    handleReport(row) {
      this.reportForm.pointId = row.source;
      this.reportOpen = true;
    },
    // 审核按钮
    handleAuditing(row) {
      this.auditingForm = row;
@@ -723,3 +752,19 @@
  }
};
</script>
<style scoped>
.work-order-item {
  margin-bottom: 5px;
}
.time {
  font-size: 13px;
  color: #999;
}
.image {
  width: 165px;
  height: 150px;
  padding: 10px;
}
</style>