|
@@ -1,100 +1,35 @@
|
|
|
<template>
|
|
|
- <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑项目' : '新增项目'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
- <el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px">
|
|
|
- <el-form-item label="项目名称" prop="name">
|
|
|
- <el-input v-model.trim="formData.name" placeholder="输入项目名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="地区" prop="address">
|
|
|
- <el-cascader :options="data" :props="{ emitPath: true, value: 'code', label: 'name' }" placeholder="请选择" clearable class="w100" v-model="formData.address">
|
|
|
- </el-cascader>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="详细地址" prop="addressDetail">
|
|
|
- <el-input v-model.trim="formData.addressDetail" placeholder="输入详细地址" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="渠道商" prop="channelMerchants">
|
|
|
- <el-input v-model.trim="formData.channelMerchants" placeholder="输入渠道商" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="关键客户" prop="customName">
|
|
|
- <el-input v-model.trim="formData.customName" placeholder="输入客户名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="维修公司" prop="repairCompany">
|
|
|
- <el-input v-model.trim="formData.repairCompany" placeholder="输入维修公司" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="维修电话" prop="repairMobile">
|
|
|
- <el-input v-model.trim="formData.repairMobile" placeholder="输入维修电话" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button @click="showDialog = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">确定</el-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <el-dialog class="api-edit" v-model="showDialog" :title="`${formData?.id ? '编辑项目' : '新增项目'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <EditVue ref="editRef" v-if="showDialog" @getList="getList" @cancle="cancle"></EditVue>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, reactive, nextTick } from 'vue';
|
|
|
-import api from '/@/api/projects';
|
|
|
-import { ruleRequired } from '/@/utils/validator';
|
|
|
-import { ElMessage } from 'element-plus';
|
|
|
-import data from 'province-city-china/dist/level.json'
|
|
|
+import { ref, nextTick } from 'vue';
|
|
|
+import EditVue from './edit.vue'
|
|
|
|
|
|
const emit = defineEmits(['getList']);
|
|
|
|
|
|
const showDialog = ref(false);
|
|
|
-const formRef = ref();
|
|
|
+const editRef = ref();
|
|
|
+const formData = ref({ id: null });
|
|
|
|
|
|
-const baseForm = {
|
|
|
- id: undefined,
|
|
|
- address: null,
|
|
|
- name: '',
|
|
|
- addressDetail: '',
|
|
|
- channelMerchants: '',
|
|
|
- customName: '',
|
|
|
- repairCompany: '',
|
|
|
- repairMobile: '',
|
|
|
-};
|
|
|
-
|
|
|
-const formData = reactive({
|
|
|
- ...baseForm,
|
|
|
-});
|
|
|
-
|
|
|
-const ruleForm = {
|
|
|
- name: [ruleRequired('不能为空')],
|
|
|
- address: [ruleRequired('不能为空')],
|
|
|
- addressDetail: [ruleRequired('不能为空')],
|
|
|
- channelMerchants: [ruleRequired('不能为空')],
|
|
|
- customName: [ruleRequired('不能为空')],
|
|
|
- repairCompany: [ruleRequired('不能为空')],
|
|
|
- repairMobile: [ruleRequired('不能为空')],
|
|
|
-};
|
|
|
-
|
|
|
-const onSubmit = async () => {
|
|
|
- await formRef.value.validate();
|
|
|
-
|
|
|
- const theApi = formData.id ? api.edit : api.add;
|
|
|
-
|
|
|
- await theApi(formData);
|
|
|
-
|
|
|
- ElMessage.success('操作成功');
|
|
|
- resetForm();
|
|
|
- showDialog.value = false;
|
|
|
- emit('getList');
|
|
|
-};
|
|
|
-
|
|
|
-const resetForm = async () => {
|
|
|
- Object.assign(formData, { ...baseForm });
|
|
|
- formRef.value && formRef.value.resetFields();
|
|
|
-};
|
|
|
-
|
|
|
-const open = async (row: any) => {
|
|
|
- resetForm();
|
|
|
+function open(row?: any) {
|
|
|
showDialog.value = true;
|
|
|
+ formData.value = row;
|
|
|
nextTick(() => {
|
|
|
- Object.assign(formData, { ...row, address: JSON.parse(row.address) });
|
|
|
+ editRef.value.open(row)
|
|
|
});
|
|
|
-};
|
|
|
+}
|
|
|
+
|
|
|
+function getList() {
|
|
|
+ emit('getList')
|
|
|
+ showDialog.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+function cancle() {
|
|
|
+ showDialog.value = false;
|
|
|
+}
|
|
|
|
|
|
defineExpose({ open });
|
|
|
</script>
|