web/src/views/service-unit/dispatch/dispatch-manage/add-dispatch-dialog.vue

<template>
  <my-dialog
    :visible="visible"
    :header="`${isEdit ? '修改' : '新增'}派单`"
    :width="840"
    :closeOnOverlayClick="false"
    attach="body"
    @close="emit('update:visible', false)"
  >
    <t-form ref="formRef" :data="formData" :rules="rules" labelWidth="120px">
      <t-row :gutter="[0, 20]">
        <t-col :span="6">
          <t-form-item label="项目单号" name="crmNo">
            <t-input v-model="formData.crmNo" clearable></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="项目名称" name="name">
            <t-input v-model="formData.name" clearable></t-input>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="派单时间" name="beginTime">
            <t-date-picker
              v-model="formData.beginTime"
              value-type="time-stamp"
              enable-time-picker
              format="YYYY/MM/DD HH:mm"
              :time-picker-props="{ format: 'HH:mm' }"
            />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="客户经理" name="crmUserId">
            <select-type-user
              v-model="formData.crmUserId"
              type="ACCOUNT_MANAGER"
            ></select-type-user>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="客户类型" name="customType">
            <t-select v-model="formData.customType" @change="customTypeChange">
              <t-option
                v-for="(val, key) in CUSTOMER_TYPE"
                :key="key"
                :label="val"
                :value="key"
              />
            </t-select>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="客户名称" name="customId">
            <select-customer
              v-model="formData.customId"
              :type="formData.customType"
              type-required
            ></select-customer>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="考试开始时间">
            <t-date-picker
              v-model="formData.examStartTime"
              value-type="time-stamp"
              enable-time-picker
              format="YYYY/MM/DD HH:mm"
              :time-picker-props="{ format: 'HH:mm' }"
            />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="考试结束时间">
            <t-date-picker
              v-model="formData.examEndTime"
              value-type="time-stamp"
              enable-time-picker
              format="YYYY/MM/DD HH:mm"
              :time-picker-props="{ format: 'HH:mm' }"
            />
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="实施产品" name="productId">
            <select-product
              v-model="formData.productId"
              clearable
              :productType="formData.customType"
            ></select-product>
          </t-form-item>
        </t-col>
        <t-col :span="6">
          <t-form-item label="服务单元">
            <select-service-unit
              v-if="visible"
              v-model="formData.serviceId"
              :filterParams="{
                statusList: ['PUBLISH'],
                type: formData.customType,
              }"
            ></select-service-unit>
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
    <template #foot>
      <t-button theme="default" @click="emit('update:visible', false)"
        >取消</t-button
      >
      <t-button theme="primary" @click="save">保存</t-button>
    </template>
  </my-dialog>
</template>
<script setup name="AddDispatchDialog">
import { ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';

import useClearDialog from '@/hooks/useClearDialog';
import { dispatchEditApi } from '@/api/service-unit';
import { CUSTOMER_TYPE } from '@/config/constants';

const props = defineProps({
  visible: Boolean,
  curRow: Object,
});
const emit = defineEmits(['update:visible']);
const formRef = ref(null);

const { formData, isEdit } = useClearDialog(
  {
    id: null,
    crmNo: '',
    name: '',
    beginTime: null,
    serviceId: null,
    crmUserId: null,
    customType: null,
    customId: null,
    examStartTime: null,
    examEndTime: null,
    productId: null,
    leadId: null,
  },
  props,
  formRef,
  () => {
    for (let key in formData) {
      formData[key] = props.curRow[key];
    }
  }
);

const rules = {
  crmNo: [
    {
      required: true,
      message: '项目单号必填',
      type: 'error',
      trigger: 'change',
    },
    {
      max: 100,
      message: '至多需要100个字',
      type: 'error',
      trigger: 'change',
    },
  ],
  name: [
    {
      required: true,
      message: '项目名称必填',
      type: 'error',
      trigger: 'change',
    },
    {
      max: 100,
      message: '至多需要100个字',
      type: 'error',
      trigger: 'change',
    },
  ],
  beginTime: [
    {
      required: true,
      message: '派单时间必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  crmUserId: [
    {
      required: true,
      message: '客户经理必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  customType: [
    {
      required: true,
      message: '客户类型必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  customId: [
    {
      required: true,
      message: '客户必选',
      type: 'error',
      trigger: 'change',
    },
  ],
  productId: [
    {
      required: true,
      message: '实施产品必选',
      type: 'error',
      trigger: 'change',
    },
  ],
};

const customTypeChange = () => {
  formData.customId = null;
};

const save = async () => {
  if (formData.examStartTime > formData.examEndTime) {
    MessagePlugin.error('考试开始时间不得迟于考试结束时间');
    return;
  }
  const valid = await formRef.value.validate();
  if (valid !== true) return;

  const res = await dispatchEditApi(formData).catch(() => {});
  if (!res) return;

  MessagePlugin.success('保存成功');
  emit('update:visible', false);
  emit('success');
};
</script>