supply-front/src/views/commercialEngineering/components/operate.vue

<template>
  <el-dialog
    :title="operateTitle"
    :visible.sync="visible"
    :width="operateType === 'delete' ? '30%' : '50%'"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="onClose"
  >
    <div v-if="['update', 'replace'].includes(operateType)">
      <div>
        <div v-if="operateType === 'update'">
          <div class="flex-box">
            <div class="flex-box-title">工单跟进状态</div>
            <el-select v-model="formData.status" placeholder="请选择" clearable size="mini">
              <el-option v-for="item in followType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="flex-box">
            <div class="flex-box-title">工程登录信息</div>
            <div>已选择{{ tableData.length || 0 }}个工程登录</div>
          </div>
        </div>
      </div>
      <div v-if="operateType === 'replace'">
        <div class="flex-box">
          <div class="flex-box-title">业务员</div>
          <el-select v-model="formData.serviceId" placeholder="请选择" clearable size="mini">
            <el-option v-for="item in salesmanList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="flex-box">
          <div class="flex-box-title">备注</div>
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入"
            :maxlength="-1"
            :show-word-limit="false"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </div>
        <div class="flex-box">
          <div class="flex-box-title">工程登录信息</div>
          <div>已选择{{ tableData.length || 0 }}个工程登录</div>
        </div>
      </div>
      <div>
        <zj-table
          ref="tableEl"
          style="margin-bottom: 20px"
          :is-drop="true"
          :columns="columns"
          :table-data="tableData"
          :table-attributes="{
            border: true,
            selectColumn: true
          }"
          :table-events="tableEvents"
        />
        <!-- <div class="fr">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div> -->
      </div>
    </div>
    <div v-if="operateType === 'delete'">
      <div class="mg">请确认是否需要删除该项目？经删除后不可恢复</div>
      <div>请确认是否需要删除已选择的项目？经删除后不可恢复</div>
    </div>
    <div v-if="operateType === 'apply'">
      <div class="mg">请确认是否需要申请修改项目跟进状态？</div>
      <div class="mg">申请原因</div>
      <div>
        <el-input
          v-model="formData.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入"
          :maxlength="-1"
          :show-word-limit="false"
          :autosize="{ minRows: 2, maxRows: 4 }"
        />
      </div>
    </div>
    <div v-if="operateType === 'examine'">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0"> 申请人: {{ formData.applyBy }}</el-col>
        <el-col :span="12" :offset="0"> 所属公司: {{ formData.applyCompany }} </el-col>
      </el-row>
      <div class="mg">申请原因</div>
      <div>
        <el-input
          v-model="formData.applyReason"
          type="textarea"
          :rows="4"
          placeholder="请输入"
          :maxlength="-1"
          :show-word-limit="false"
          :autosize="{ minRows: 2, maxRows: 4 }"
        />
      </div>
      <div class="mg">审核确认</div>
      <div>
        <el-radio-group v-model="formData.isSuccess">
          <el-radio
            v-for="item in [
              { label: '同意', value: 'YES' },
              { label: '拒绝', value: 'NO' }
            ]"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </div>
      <div class="mg">备注</div>
      <div>
        <el-input
          v-model="formData.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入"
          :maxlength="-1"
          :show-word-limit="false"
          :autosize="{ minRows: 2, maxRows: 4 }"
        />
      </div>
    </div>
    <span slot="footer">
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="onConfirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDictList, getSalesmanList } from '@/api/common'
import { replaceService, batchUpdate, applyUpdate, delOrder, examineUpdate, applyUpdateQuery } from '@/api/frock'

export default {
  props: {
    operateVisible: {
      type: Boolean,
      default: false
    },
    operateType: {
      type: String,
      default: 'update'
    },
    operateTitle: {
      type: String,
      default: '更新'
    },
    recordSelected: {
      type: Array,
      default: () => []
    },
    detailId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: false,
      visible: true,
      formData: {
        applyBy: '',
        applyCompany: '',
        applyReason: '',
        ids: [],
        isSuccess: 'YES',
        remark: '',
        serviceId: '',
        serviceName: '',
        status: 'ING'
      },
      tableData: [],
      currentPage: 1,
      listTotal: 0,
      followType: [],
      salesmanList: [],
      machineList: [],
      tableEvents: {
        'selection-change': this.selectionChange
      },
      selectedData: []
      // operateConfig: ['update', 'delete', 'apply', 'replace', 'examine']
    }
  },
  computed: {
    columns() {
      return [
        {
          columnAttributes: {
            label: '工程编号',
            prop: 'projectNo',
            width: 150
          }
        },
        {
          columnAttributes: {
            label: '项目名称',
            prop: 'projectName',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '登录日期',
            prop: 'createTime',
            width: 150
          }
        },
        {
          columnAttributes: {
            label: '经销商名称',
            prop: 'customerName',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '业务员',
            prop: 'serviceName',
            width: 100
          }
        },
        {
          columnAttributes: {
            label: '机组类型',
            prop: 'machineType'
          }
        },
        {
          columnAttributes: {
            label: '工程地址',
            prop: 'address',
            width: 200
          }
        },
        {
          columnAttributes: {
            label: '跟进状态',
            prop: 'status'
          },
          render: (h, { row, column, $index }) => {
            const obj = {
              ING: '跟进中', LOSS: '已丢单', SIGN: '签订合同'
            }
            return (
              <div>
                {obj[row.status]}
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    this.visible = this.operateVisible
    this.tableData = this.recordSelected
    if (['update', 'replace'].includes(this.operateType)) {
      this.getDictList()
      this.operateType === 'replace' && this.getSalesmanList()
    }
    if (this.operateType === 'examine' && this.detailId) {
      this.getApplyUpdateQuery()
    }
  },
  methods: {
    getDictList() {
      getDictList({
        sysDictEnum: 'FOLLOW_STATUS'
      }).then(res => {
        this.followType = res.data.map(k => {
          return {
            label: k.dictValue,
            value: k.dictCode
          }
        })
      })
    },
    getSalesmanList() {
      getSalesmanList({
        pageNum: 1,
        pageSize: -1,
        isCustomer: 0,
        status: true
      }).then(res => {
        this.salesmanList = res.data.records.map(k => {
          return {
            label: k.nickName,
            value: k.adminUserId
          }
        })
      })
    },
    getApplyUpdateQuery() {
      applyUpdateQuery({ id: this.detailId }).then(res => {
        this.formData = {
          ...res.data
        }
        this.formData.isSuccess = 'YES'
        this.formData.status = 'ING'
      })
    },
    selectionChange(data) {
      this.selectedData = data
    },
    handleInterface(fn, tip) {
      fn.then(() => {
        this.$successMsg(tip)
        this.onClose()
      })
    },
    onConfirm() {
      let params
      const fnEnum = {
        update: () => {
          if (!this.formData.status) {
            this.$errorMsg('工单跟进状态不能为空')
            return
          }
          if (!this.selectedData.length) {
            this.$errorMsg('工程登录信息不能为空')
            return
          }
          const ids = this.selectedData.map(k => k.id)
          params = {
            status: this.formData.status,
            ids
          }
          this.handleInterface(batchUpdate(params), '更新成功')
        },
        replace: () => {
          if (!this.formData.serviceId) {
            this.$errorMsg('业务员不能为空')
            return
          }
          if (!this.selectedData.length) {
            this.$errorMsg('工程登录信息不能为空')
            return
          }
          const ids = this.selectedData.map(k => k.id)
          const serviceName = this.salesmanList.find(k => k.value === this.formData.serviceId).label
          params = {
            serviceId: this.formData.serviceId,
            serviceName,
            ids
          }
          this.handleInterface(replaceService(params), '替换成功')
        },
        apply: () => {
          if (!this.formData.remark) {
            this.$errorMsg('申请原因不能为空')
            return
          }
          params = {
            remark: this.formData.remark,
            ids: [this.detailId]
          }
          this.handleInterface(applyUpdate(params), '申请成功')
        },
        examine: () => {
          params = {
            remark: this.formData.remark,
            ids: [this.detailId]
          }
          this.handleInterface(examineUpdate)
        },
        delete: () => {
          const ids = this.tableData.map(k => k.id)
          this.handleInterface(delOrder(ids), '删除成功')
        }
      }
      fnEnum[this.operateType]()
    },
    onClose() {
      this.$emit('close')
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.flex-box {
  display: flex;
  align-items: center;
  margin: 20px 0;
  &-title {
    flex: 0 0 100px;
  }
}
.mg {
  margin: 20px 0;
}
</style>