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">
    <!-- 创建工单 -->
    <div class="cartographer_big">
      <el-dialog title="创建工单" width="100%" :modal="false" :visible.sync="createFormBool" :before-close="handleClose">
        <workOrderInfo v-if="createFormBool" />
      </el-dialog>
    </div>
    <!-- 工单详情 -->
    <div class="cartographer_big">
      <el-dialog title="工单详情" width="100%" :modal="false" :visible.sync="detailFormBool" :before-close="handleClose">
        <Detail v-if="detailFormBool" :id="id" />
      </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 { listPageV2 } from "@/api/workOrder/orderType";
import { orderBaseList, orderBaseListExport, orderBaseStatusCount } 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"
export default {
  components: {
    TemplatePage,
    workOrderInfo,
    Detail,
    Reassignment,
    Reschedule
  },
  mixins: [import_mixin],
  data() {
    return {
      id: this.$route.query.id || '',
      // 创建表单
      createFormBool: false,
      // 详情
      detailFormBool: false,
      // 批量改约
      rescheduleBool: false,
      // 批量派工/改派
      reassignmentBool: false,
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      orderTypeList: []
    }
  },
  computed: {
    moreParameters() {
      return [
        {
          name: '工单类型',
          key: 'orderSmallType',
          value: '',
          conditions: [{
            label: "全部",
            value: ""
          }, ...this.orderTypeList]
        },
        {
          name: '工单状态',
          key: 'orderStatus',
          value: '',
          conditions: [{
            label: "全部",
            value: ""
          }, {
            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"
          }]
        }
      ]
    },
    // 用户信息
    userInfo() {
      return JSON.parse(localStorage.getItem('greemall_user'))
    },
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            {
              name: '创建工单',
              click: () => {
                this.createFormBool = true
              }
            },
          ],
          [
            {
              name: '批量操作',
              click: () => { }
            },
            {
              name: '批量下派改派',
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选工单')
                  return
                }
                this.reassignmentBool = true
              }
            },
            {
              name: '批量预约改约',
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选工单')
                  return
                }
                this.rescheduleBool = true
              }
            },
          ],
        ]
      ]
    }
  },
  created() {
    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: {
    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
    },

    // 列表请求函数
    getList(p, cb) {
      try {
        var pam = JSON.parse(JSON.stringify(p))
        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 })
        }
        cb && cb(pam)
        return orderBaseList(pam)
      } catch (err) {
      } finally {
        this.$nextTick(() => {
          orderBaseStatusCount().then(res => {
            console.log(res)
          })
        })
      }
    },

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

    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'orderFlags') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {(row[column.columnAttributes.prop] || []).map(item => {
                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>
          )
        }
      }
      return defaultData
    },

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

    operation(h, { row, index, column }) {
      return (
        <div class='operation-btns'>
          <el-button type="text" onClick={() => {
            this.id = row.id
            this.$nextTick(() => {
              this.detailFormBool = true
            })
          }}>编辑</el-button>
        </div>
      )
    },

    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>
#pane-workOrderInfo {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.worker {
  display: flex;
  justify-content: space-between;

  .worker_left {
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    color: #666;
    line-height: 28px;
    margin-right: 10px;
  }

  .worker_right {
    flex: 1;

    ::v-deep .el-button {
      margin: 0 10px 10px 0px;
    }
  }
}

.creatOrderPopuc {
  ::v-deep &>.zj-page-container {
    height: calc(100vh - 165px) !important;
  }
}
</style>