代码优化

linwe

2024-08-09 5e2aafeede13d337380f736567caf74f49713be7

 src/views/task/reportForRepairs.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-12-14 17:10:00
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-12-29 10:36:08
 * @LastEditTime: 2024-01-29 14:02:52
 * @FilePath: \jczz_web\src\views\task\reportForRepairs.vue
 * @Description:
 *
@@ -15,13 +15,13 @@
      v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="confirmFlag" slot-scope="{row}">
        <el-tag size="small" :type="showConfirmFlag(row.confirmFlag).type">
      <template slot="confirmFlag" slot-scope="{row, size}">
        <el-tag :size="size" :type="showConfirmFlag(row.confirmFlag).type">
          {{ showConfirmFlag(row.confirmFlag).text }}
        </el-tag>
      </template>

      <template slot="expand" slot-scope="{row}">
      <template slot="expand" slot-scope="{row, size}">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in timeLineData(row)" :key="index" :timestamp="item.createTime"
            :icon="item.icon" :color="item.color" :hide-timestamp="item.contentType == 3" placement="top">
@@ -66,21 +66,40 @@
        </el-timeline>
      </template>

      <template slot-scope="scope" slot="menu">
        <el-button type="text" icon="el-icon-chat-dot-square" :disabled="scope.row.confirmFlag === 3"
          @click="replyBtnClick(scope.row)">
      <template slot-scope="{row, size, index}" slot="menu">
        <el-button :size="size" v-if="permission.report_for_repairs_details" type="text" icon="el-icon-document-remove"
          @click="rowExpansion(row)">
          详情
        </el-button>

        <el-button :size="size" v-if="permission.report_for_repairs_reply" type="text" icon="el-icon-chat-dot-square"
          :disabled="row.confirmFlag === 3" @click="replyBtnClick(row)">
          回复
        </el-button>

        <el-button type="text" icon="el-icon-document-copy" :disabled="scope.row.confirmFlag === 3"
          @click="turnOverBtnClick(scope.row)">
        <el-button :size="size" v-if="permission.report_for_repairs_turn_over" type="text" icon="el-icon-document-copy"
          :disabled="row.confirmFlag === 3" @click="turnOverBtnClick(row)">
          移交
        </el-button>

        <el-button :size="size" v-if="permission.report_for_repairs_del" type="text" icon="el-icon-delete"
          @click="rowDel(row)">
          删除
        </el-button>
      </template>

      <template slot="menuLeft">
      <template slot-scope="{row, size, index}" slot="menuLeft">
        <el-button :size="size" type="primary" v-if="permission.task_reportForRepairs_add" icon="el-icon-plus"
          @click="$refs.crud.rowAdd()">新增</el-button>

        <el-button size="small" icon="el-icon-delete" plain v-if="permission.article_delete" @click="handleDelete">删
          除
        </el-button>
      </template>

      <template slot-scope="{row, size}" slot="phone">
        <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneflag')"
          v-text="textDispose(row, 'phoneflag', 'phone')">
        </el-button>
      </template>
    </avue-crud>
@@ -99,7 +118,8 @@
      </avue-form>
    </el-dialog>

    <el-dialog title="转交" append-to-body :visible.sync="turnOverPopup" center @close="popupClose">
    <el-dialog title="转交" class="turn-over-popup" append-to-body :visible.sync="turnOverPopup" center
      @close="popupClose">
      <avue-form ref="turnOverForm" :option="turnOverOption" v-model="turnOverForm" @submit="turnOverHandleSubmit"
        @reset-change="turnOverHandleReset"></avue-form>
    </el-dialog>
@@ -128,6 +148,17 @@

  export default {
    data() {
      let validatorPhone = function(rule, value, callback) {
        if (value) {
          if (!/^1[3456789]\d{9}$/.test(value)) {
            callback(new Error('手机号格式有误！'))
          } else {
            callback()
          }
        }
        callback()
      }

      return {
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        form: {},
@@ -141,6 +172,15 @@
        datetime: "",
        selectionList: [],
        option: {
          labelWidth: 96,
          searchLabelWidth: 96,
          searchShow: true,
          searchMenuSpan: 3,
          menuWidth: 280,
          addBtn: false,
          viewBtn: false,
          editBtn: false,
          delBtn: false,
          index: false,
          selection: false,
          expand: true,
@@ -148,49 +188,53 @@
          calcHeight: 54,
          dialogWidth: 950,
          tip: false,
          searchShow: true,
          searchMenuSpan: 3,
          menuWidth: 350,
          border: true,
          //stripe:true,
          viewBtn: true,
          // excelBtn: true,
          dialogClickModal: false,
          column: [{
              width: 100,
              label: "类型",
              prop: "type",
              span: 12,
              searchLabelWidth: 46,
              searchSpan: 4,
              search: true,
              dataType: "number",
              type: "select",
              width: 100,
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=reportForRepairsType",
              props: {
                label: "dictValue",
                value: "dictKey",
              },
              search: true,
            },
            {
              width: 110,
              label: "姓名",
              prop: "realName",
              span: 12,
              searchSpan: 4,
              width: 100,
              searchLabelWidth: 66,
              search: true,
            },

            {
              label: "手机号",
              width: 120,
              label: "手机号码",
              prop: "phone",
              span: 12,
              width: 100,
              searchSpan: 4,
              search: true,
              searchSpan: 4,
              slot: true,
              rules: [{
                validator: validatorPhone,
                trigger: 'blur'
              }],
            },

            {
              width: 110,
              label: "图片",
              prop: "imageUrls",
              width: 80,
              type: "upload",
              listType: "picture-card",
              dataType: "string",
@@ -204,22 +248,45 @@
              span: 24,
            },
            {
              overHidden: true,
              label: "地点",
              prop: "addressName",
              overHidden: true
            },
            {
              width: 110,
              label: "所属街道",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              prop: "streetName",
              search: true,
              searchSpan: 4
            },

            {
              width: 156,
              overHidden: true,
              label: "所属社区",
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              prop: "communityName",
              search: true,
              searchSpan: 4
            },
            {
              width: 100,
              label: "状态",
              addDisplay: false,
              editDisplay: false,
              slot: true,
              label: "状态",
              prop: "confirmFlag",
              overHidden: true
            },
            {
              width: 144,
              label: "上报时间",
              prop: "createTime",
              width: 160,
              addDisplay: false,
              editDisplay: false,
              type: "date",
@@ -227,9 +294,9 @@
              valueFormat: "yyyy-MM-dd HH:mm:ss",
            },
            {
              width: 144,
              label: "处理时间",
              prop: "confirmTime",
              width: 160,
              addDisplay: false,
              editDisplay: false,
              type: "date",
@@ -291,10 +358,10 @@
            },

            {
              width: 110,
              fileType: 'img',
              label: "图片",
              prop: "imageList",
              width: 80,
              type: "upload",
              listType: "picture-card",
              dataType: "string",
@@ -334,7 +401,7 @@
            // },

            {
              span: 14,
              span: 24,
              label: "人员类型",
              prop: "peopleType",
              type: 'select',
@@ -354,7 +421,7 @@
            },

            {
              span: 14,
              span: 24,
              label: "指定人员",
              prop: "transferUserId",
              type: 'select',
@@ -530,9 +597,31 @@

          return tags
        }
      },

      textDispose() {
        return (row, flag, type) => {
          if (row[flag] || row[type] == null) {
            return row[type]
          } else {
            if (type == 'principalIdCard') {
              return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
            } else {
              return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
            }
          }
        }
      }
    },
    methods: {
      showStringDispose(row, type) {
        row[type] = !row[type]
      },

      rowExpansion(row) {
        this.$refs.crud.toggleRowExpansion(row)
      },

      popupClose() {
        this.$refs.replyForm && this.$refs.replyForm.resetForm()
        this.$refs.turnOverForm && this.$refs.turnOverForm.resetForm()
@@ -557,6 +646,26 @@
      },

      handleSubmit(form, done) {

        if (form.imageList.length > 0) {
          var urls = []
          var split = form.imageList.split(",").filter(item => item != '')
          split.forEach(url => {
            var names = url.split("jczz/")
            urls.push(names[1])
          })
          form.imageList = urls.join(",")
        }
        // if (form.imageList.length > 0) {
        //   var urls = []
        //   var split = form.imageList.split(",").filter(item => item != '')
        //   split.forEach(url => {
        //     var names = url.split("jczz/")
        //     urls.push(names[1])
        //   })
        //   form.imageList = urls.join(",")
        // }

        this.saveReply({
          ...form,
          videoList: this.fileList.map(item => item.response.data.link).join(','),
@@ -796,6 +905,7 @@
          this.page.total = data.total
          this.data = data.records
          this.data.forEach(item => {
            this.$set(item, 'phoneflag', false)
            if (item.imageUrls) {
              if (item.imageUrls.length > 0) {
                var urls = []
@@ -806,6 +916,20 @@
                item.imageUrls = urls.join(",")
              }
            }
            if (item.taskRepairStepList.length > 0) {
              item.taskRepairStepList.forEach(ee => {
                if (ee.imageList) {
                  if (ee.imageList.length > 0) {
                    var urls = []
                    var names = ee.imageList.split(",")
                    names.forEach(name => {
                      urls.push(website.minioUrl + name)
                    })
                    ee.imageList = urls.join(",")
                  }
                }
              })
            }
          })
          this.loading = false
          this.selectionClear()