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

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" :form-data="orderInfo" :form-attributes="{ size: 'mini' }">
        <zj-form-module title="派单信息" label-width="100px" :form-data="orderInfo"
          :form-items="pandanxinxi"></zj-form-module>
        <zj-form-module title="已选工单" label-width="100px" :form-data="orderInfo"
          :form-items="selectedItems"></zj-form-module>
      </zj-form-container>
    </zj-page-fill>
    <!-- 操作按钮 -->
    <div>
      <div style="box-sizing: border-box;padding: 16px;text-align:right;">
        <el-button size="mini" @click="$emit('close')">
          取消
        </el-button>
        <el-button type="primary" size="mini" @click="allVerify">
          确定
        </el-button>
      </div>
    </div>
  </zj-page-container>
</template>

<script>
import pandanxinxi from '../../detailModule/workOrderInfo/mixins/pandanxinxi.js'
import showRecordSelected from "../mixins/showRecordSelected.js"
import { required } from '@/components/template/rules_verify.js'
import { changeOrderChangeWorker } from "@/api/workOrderPool.js"
export default {
  mixins: [
    pandanxinxi,
    showRecordSelected
  ],
  data() {
    return {
      orderInfo: {
        websitId: "",
        workerId: "",
        workerId_fz: "",
        orderWorkers: [],
        recordSelected: []
      }
    }
  },
  computed: {
    formOptions() {
      return {
        // 派单信息-----------------------------
        // 服务商网点
        websitId: {
          isEdit: true,
          isShow: true,
          isRules: [...required]
        },
        workerId: {
          isEdit: true,
          isShow: true,
          isRules: [...required]
        },
        orderWorkers: {
          isEdit: true,
          isShow: true,
          isRules: [...required]
        },
      }
    },
  },
  methods: {
    allVerify() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        changeOrderChangeWorker({
          ids: this.orderInfo.recordSelected.map(item => item.id),
          websitId: this.orderInfo.websitId,
          workerIds: this.orderInfo.orderWorkers.map(item => item.workerId),
        }).then(res => {
          this.$message({
            type: 'success',
            message: '派单成功!'
          })
          this.$emit("close")
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep .zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    &>div:nth-child(1) {
      margin-top: 20px;
    }
  }
}
</style>