ops-management-platform-frontend/src/views/project/projectManage/addModal.vue

<template>
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%">
    <a-form :model="form" layout="vertical" :rules="rules" ref="formRef">
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="项目名称" name="projectName">
            <a-input v-model:value="form.projectName" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="项目编号" name="projectCode">
            <a-input v-model:value="form.projectCode" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="项目类别" name="projectType">
            <a-select
              v-model:value="form.projectType"
              :options="projectTypeOptions"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="故障大类" name="faultCategory">
            <a-select
              v-model:value="form.faultCategory"
              :options="faultCategoryOptions"
              :fieldNames="{
                label: 'typeName',
                value: 'id',
                options: 'options',
              }"
              placeholder="请选择"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="接单超期时间" name="orderTakingOverTime">
            <a-input v-model:value="form.orderTakingOverTime" placeholder="接单超期时间(小时)" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="接单超期扣款" name="orderTakingCost">
            <a-input v-model:value="form.orderTakingCost" placeholder="接单超期扣款(元/小时)" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="处理超期时间" name="handleOverTime">
            <a-input v-model:value="form.handleOverTime" placeholder="处理超期时间(小时)" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="处理超期扣款" name="handleCost">
            <a-input v-model:value="form.handleCost" placeholder="处理超期扣款(元/小时)" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="项目概要" name="projectContent">
            <a-textarea v-model:value="form.projectContent" :rows="4" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="附件" name="attachments">
            <a-upload
              v-model:file-list="fileLists"
              :action="`${apiUrl}/resource/oss/upload`"
              :headers="headers"
              @change="handleChange"
            >
              <a-button type="primary"> 上传 </a-button>
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
  import { reactive, ref } from 'vue';
  import { getInfo, getFaultCategoryType, add, update } from './api';
  import { message } from 'ant-design-vue';
  import { getToken } from '@/utils/auth';
  import { useGlobSetting } from '@/hooks/setting';
  export default {
    setup(props,{emit}) {
      const title = ref('新增');
      const formRef = ref();
      const visible = ref(false);
      const form = reactive({
        projectName: '',
        projectCode: '',
        projectType: null,
        faultCategory: null,
        orderTakingOverTime: '',
        orderTakingCost: '',
        handleOverTime: '',
        handleCost: '',
        projectContent: '',
        attachments: null,
        id: null,
      });
      //下拉框

      const projectTypeOptions = [
        {
          value: '交警',
        },
        {
          value: '公安',
        },
        {
          value: '环保',
        },
        {
          value: '公路',
        },
        {
          value: '其他',
        },
      ];
      const faultCategoryOptions = ref([]);
      const getOptions = async () => {
        const res = await getFaultCategoryType();
        faultCategoryOptions.value = res.rows;
      };
      getOptions();
      //打开弹窗
      const showModal = async (type, id) => {
        visible.value = true;
        if (type == 1) {
          title.value = '新增';
        } else if (type == 2) {
          title.value = '编辑';
          const data = await getInfo(id);
          for (let i in form) {
            form[i] = data[i];
          }
          if (form.attachments && form.attachments.length > 0) {
            form.attachments.forEach((i) => {
              fileLists.value.push({
                url: i.url,
                name: i.name,
                ossId:i.ossId,
                status: 'done',
              });
            });
          }
        }
      };
      //校验
      const rules = {
        projectName: [{ required: true, message: '请输入' }],
        projectCode: [{ required: true, message: '请输入' }],
        projectType: [{ required: true, message: '请选择' }],
        faultCategory: [{ required: true, message: '请选择' }],
        orderTakingOverTime: [{ required: true, message: '请输入' }],
        orderTakingCost: [{ required: true, message: '请输入' }],
        handleOverTime: [{ required: true, message: '请输入' }],
        handleCost: [{ required: true, message: '请输入' }],
        projectContent: [{ required: true, message: '请输入' }],
      };
      //关闭modal
      const closeModal = () => {
        formRef.value.resetFields();
        fileLists.value= []
        visible.value = false;
      };


      //提交
      const handleOk = () => {
        formRef.value.validate().then((valid) => {
          if (valid) {
            if (title.value == '新增') {
              let params = {};
              for (let i in form) {
                params[i] = form[i];
              }
              delete params.id
              add(params).then((_) => {
                message.success('新增成功');
                emit('success')
                closeModal()
              });
            } else {
              let params = {};
              for (let i in form) {
                params[i] = form[i];
              }
              update(params).then((_) => {
                message.success('编辑成功');
                emit('success')
                closeModal()
              });
            }
          }
        });
      };
      //上传功能
      const fileLists = ref([]);
      const globSetting = useGlobSetting();
      const { apiUrl, clientId } = globSetting;
      const handleChange = (info) => {
        if (info.fileList.length > 0) {
          form.attachments = [];
          info.fileList.forEach((i) => {
            if (i.status == 'done') {
              form.attachments.push({
                url: i.response?.data.url || i.url,
                name: i.response?.data.fileName || i.name,
                ossId:i.response?.data.ossId || i.ossId
              });
            }
          });
        } else {
          form.attachments = null;
        }
        console.log(fileLists);
      };
      return {
        visible,
        title,
        form,
        showModal,
        handleOk,
        projectTypeOptions,
        faultCategoryOptions,
        rules,
        formRef,
        closeModal,
        apiUrl,
        headers: {
          Authorization: 'Bearer ' + getToken(),
          clientId,
        },
        handleChange,
        fileLists,
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-modal-body {
    max-width: 600px;
    margin: 0 auto;
  }
</style>