zfire-newmall-admin/src/views/workOrder/workOrderPool/index.vue

<template>
  <!-- 工单池 -->
  <template-page ref="pageRef" :getList="getList" :operation="operation()" :exportList="exportList"
    :optionsEvensGroup="optionsEvensGroup" :columnParsing="columnParsing" :tableAttributes="tableAttributes"
    :tableEvents="tableEvents" :moreParameters="moreParameters" :screeningAnalysis="screeningAnalysis"
    :filterMethod="filterMethod" :replaceOrNotMap="true" :defaultSearchData="defaultSearchData">
    <!-- 创建工单 -->
    <div class="cartographer_big">
      <el-dialog title="创建工单" width="100%" :modal="false" :visible.sync="createFormBool" :before-close="handleClose">
        <workOrderInfo :workOrderType="workOrderType" v-if="createFormBool" />
      </el-dialog>
    </div>
    <!-- 工单详情 -->
    <div class="cartographer_big">
      <el-dialog :title="'工单详情-' + id" width="100%" :modal="false" :visible.sync="detailFormBool"
        :before-close="handleClose">
        <Detail v-if="detailFormBool" :id="id" :workOrderType="workOrderType" />
      </el-dialog>
    </div>
    <!-- 批量预约/改约 -->
    <div class="cartographer_big">
      <el-dialog title="批量约单" width="100%" :modal="false" :visible.sync="rescheduleBool" :before-close="rescheduleClose">
        <Reschedule v-if="rescheduleBool" :recordSelected="recordSelected" @close="rescheduleClose" />
      </el-dialog>
    </div>
    <!-- 批量派工/改派 -->
    <div class="cartographer_big">
      <el-dialog title="批量派单" width="100%" :modal="false" :visible.sync="reassignmentBool"
        :before-close="reassignmentClose">
        <Reassignment v-if="reassignmentBool" :recordSelected="recordSelected" @close="reassignmentClose" />
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import { EventBus } from '@/utils/eventBus'
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import { listPageV2 } from "@/api/workOrder/orderType";
import { orderBaseList, orderBaseListExport, orderBaseStatusCount, orderBaseImport } from "@/api/workOrderPool.js"
import workOrderInfo from './detailModule/workOrderInfo/index.vue'
import Detail from './detail'
import Reassignment from "./components/reassignment/index.vue"
import Reschedule from "./components/reschedule/index.vue"
import { commonTemplateDownload } from '@/api/common.js'
import ywgdjs from "@/assets/ywgdjs.png"
import yjs from "@/assets/yjs.png"
export default {
  components: {
    TemplatePage,
    workOrderInfo,
    Detail,
    Reassignment,
    Reschedule
  },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      id: this.$route.query.id || '',
      // 创建表单
      createFormBool: false,
      // 详情
      detailFormBool: false,
      // 批量改约
      rescheduleBool: false,
      // 批量派工/改派
      reassignmentBool: false,
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true,
        selectable: this.selectable
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      orderTypeList: [],
      orderStatusList: [],
      defaultSearchData: [],
      workOrderType: 0
    }
  },
  computed: {
    moreParameters() {
      return [
        {
          name: '工单类型',
          key: 'orderSmallType',
          value: '',
          conditions: [{
            label: "全部",
            value: ""
          }, ...this.orderTypeList]
        },
        {
          name: '工单状态',
          key: 'orderStatus',
          value: this.$route.query.orderStatus || "",
          conditions: [{
            label: "全部",
            value: ""
          }, ...this.orderStatusList]
        }
      ]
    },
    // 用户信息
    userInfo() {
      return JSON.parse(localStorage.getItem('greemall_user'))
    },
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth(["createWorkOrder", "createWbWorkOrder"], {
              name: "创建工单",
              click: () => { }
            }),
            this.optionsEvensAuth("createWorkOrder", {
              click: () => {
                this.workOrderType = 0
                this.createFormBool = true
              }
            }),
            this.optionsEvensAuth("createWbWorkOrder", {
              click: () => {
                this.workOrderType = 1
                this.createFormBool = true
              }
            })
          ],
          [
            this.optionsEvensAuth(["importTemplate", "downloadImportTemplate"], {
              name: '导入工单',
              click: () => { }
            }),
            this.optionsEvensAuth("importTemplate", ({ moduleName }) => {
              return {
                name: moduleName,
                render: () => {
                  return this.importButton(orderBaseImport, moduleName)
                }
              }
            }),
            this.optionsEvensAuth("downloadImportTemplate", {
              click: () => {
                commonTemplateDownload({ name: '工单导入模板.xlsx' }, `${this.$route.meta.title}`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            }),
          ],
          [
            this.optionsEvensAuth(["bulkOrder", "lotOrder"], {
              name: '批量操作',
              click: () => { }
            }),
            this.optionsEvensAuth("bulkOrder", {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选工单')
                  return
                }
                this.reassignmentBool = true
              }
            }),
            this.optionsEvensAuth("lotOrder", {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选工单')
                  return
                }
                this.rescheduleBool = true
              }
            }),
          ],
        ]
      ]
    }
  },
  created() {
    this.initFun()
    EventBus.$on('handleOrderClone', () => {
      this.handleClose()
    })
    // 获取工单类型
    listPageV2({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "true" }] }).then(res => {
      this.orderTypeList = res.data.records.map(item => ({
        value: item.id,
        label: item.orderSmallTypeText
      }))
    })
  },
  methods: {
    initFun() {
      if(this.pageType == "detail"){
        this.id = this.pageCode
        this.$nextTick(() => {
          this.detailFormBool = true
        })
      }
      
      if(this.pageType == "saleOrderId"){
        this.defaultSearchData = [{ "param": "a.sale_order_id", "compare": "=", "value": this.pageCode, label: "销售订单号" }]
      }


      if(this.pageType == "pgIncreItemId"){
        this.defaultSearchData = [{ "param": "a.pg_incre_order_id", "compare": "=", "value": this.pageCode, label: "增置服务明细ID" }]
      }

      if(this.pageType == "rpProjectRepairId"){
        this.defaultSearchData = [{ "param": "a.rp_project_repair_id", "compare": "=", "value": this.pageCode, label: "维保配置ID" }]
      }
    },

    selectable(row, index) {
      return !["YWG", "YJS", "YQX"].includes(Object.entries(row.selectMapData.orderStatus).find(([key, val]) => val == row.orderStatus)?.[0]) && !row.rpProjectRepairId
    },

    screeningAnalysis(jname, val) {
      if (jname == 'orderFlags') {
        return (val || []).map(item => item.tagName).join(',')
      } else {
        return val
      }
    },

    filterMethod(value, row, column) {
      if (column['property'] == 'orderFlags') {
        return (row[column['property']] || []).map(item => item.tagName).join(',') === value
      }
      return row[column['property']] === value
    },

    // 获取统计
    getOrderBaseStatusCount(...p) {
      orderBaseStatusCount(...p).then(res => {
        this.orderStatusList = [{
          label: "待预约",
          value: "DYY"
        }, {
          label: "待商户派工",
          value: "DSHPG"
        }, {
          label: "待网点派工",
          value: "DWDPG"
        }, {
          label: "待接单",
          value: "DJD"
        }, {
          label: "服务中",
          value: "FWZ"
        }, {
          label: "异常单",
          value: "YCD"
        }, {
          label: "已完工待结算",
          value: "YWG"
        }, {
          label: "已结算",
          value: "YJS"
        }, {
          label: "已取消",
          value: "YQX"
        }].map(item => {
          var data = res.data.find(val => val.orderStatus == item.value)
          if (data) {
            item.label = `${item.label}(${data.total})`
          }
          return item
        })
      })
    },

    // 列表请求函数
    getList(p, cb) {
      var pam = JSON.parse(JSON.stringify(p))
      try {
        if (pam.orderStatus) {
          pam.params.push({ "param": "a.order_status", "compare": "=", "value": pam.orderStatus })
        }
        if (pam.orderSmallType) {
          pam.params.push({ "param": "a.order_small_type", "compare": "=", "value": pam.orderSmallType })
        }
        // if (this.$route.query.saleOrderId && !pam.params.find(item => item.param == "a.sale_order_id")) {
        //   pam.params.push({ "param": "a.sale_order_id", "compare": "like", "value": this.$route.query.saleOrderId, label: "销售订单号" })
        // }
        // if (this.$route.query.pgIncreItemId && !pam.params.find(item => item.param == "a.pg_incre_order_id")) {
        //   pam.params.push({ "param": "a.pg_incre_order_id", "compare": "like", "value": this.$route.query.pgIncreItemId, label: "增置服务明细ID" })
        // }
        // if (this.$route.query.rpProjectRepairId  && !pam.params.find(item => item.param == "a.rp_project_repair_id")) {
        //   pam.params.push({ "param": "a.rp_project_repair_id", "compare": "=", "value": this.$route.query.rpProjectRepairId })
        // }
        cb && cb(pam)
        return orderBaseList(pam)
      } catch (err) {
      } finally {
        this.$nextTick(() => {
          this.getOrderBaseStatusCount({ orderSmallType: pam.orderSmallType || "" })
        })
      }
    },

    // 列表导出函数
    exportList: orderBaseListExport,

    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'orderFlags') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;display:flex;align-items:center;">
              {(row[column.columnAttributes.prop] || []).map(item => {
                if (item.tagName == "已完工") {
                  return (
                    <img src={ywgdjs} style="width:22px;height:22px;" />
                  )
                } else if (item.tagName == "已结算") {
                  return (
                    <img src={yjs} style="width:22px;height:22px;" />
                  )
                } else {
                  return (
                    <div style="display: inline-block;border:1px solid #409EFF; color:#409EFF;padding:0 2px;border-radius: 4px;margin:2px 2px 0 0;">
                      {item.tagName}
                    </div>
                  )
                }
              })}
            </div>
          )
        }
      }
      if (item.jname === 'appointmentTime') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {row[column.columnAttributes.prop] ? row[column.columnAttributes.prop].split(" ")[0] : ""}
            </div>
          )
        }
      }
      return defaultData
    },

    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },

    operation() {
      return this.operationBtn({
        edit: {
          click: ({ row, index, column }) => {
            this.id = row.id
            if (row.rpProjectRepairId) {
              this.workOrderType = 1
            } else {
              this.workOrderType = 0
            }
            this.$nextTick(() => {
              this.detailFormBool = true
            })
          }
        }
      })
    },

    handleClose() {
      this.$router.push({
        name: "workOrderPool",
        params: {},
        query: {}
      })
      this.$nextTick(() => {
        this.createFormBool = false
        this.detailFormBool = false
        this.recordSelected = []
        this.$refs?.pageRef?.refreshList()
      })
    },

    rescheduleClose() {
      this.rescheduleBool = false
      this.recordSelected = []
      this.$refs?.pageRef?.refreshList()
    },

    reassignmentClose() {
      this.reassignmentBool = false
      this.recordSelected = []
      this.$refs?.pageRef?.refreshList()
    },

  }
}
</script>

<style lang="scss" scoped></style>