|
@@ -1,90 +1,95 @@
|
|
<template>
|
|
<template>
|
|
- <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 ref="formRef" :model="formData" :rules="ruleForm" :label-width="store.state.themeConfig.themeConfig.globalI18n === 'en' ? '170px' : '100px'">
|
|
|
|
+ <el-form-item :label="$t('message.projects.list.addOrEdit.form.name')" prop="name">
|
|
|
|
+ <el-input v-model.trim="formData.name" :placeholder="$t('message.projects.list.addOrEdit.placeholders.name')" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="地区" prop="addressCode">
|
|
|
|
- <el-cascader :options="data" :props="{ emitPath: true, value: 'code', label: 'name' }" placeholder="请选择" clearable class="w100" v-model="formData.addressCode">
|
|
|
|
- </el-cascader>
|
|
|
|
|
|
+ <el-form-item :label="$t('message.projects.list.addOrEdit.form.addressCode')" prop="addressCode">
|
|
|
|
+ <el-cascader :options="data" :props="{ emitPath: true, value: 'code', label: 'name' }" :placeholder="$t('message.projects.list.addOrEdit.placeholders.select')" clearable class="w100" v-model="formData.addressCode"> </el-cascader>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="详细地址" prop="addressDetail">
|
|
|
|
- <el-input v-model.trim="formData.addressDetail" placeholder="输入详细地址" />
|
|
|
|
|
|
+ <el-form-item :label="$t('message.projects.list.addOrEdit.form.addressDetail')" prop="addressDetail">
|
|
|
|
+ <el-input v-model.trim="formData.addressDetail" :placeholder="$t('message.projects.list.addOrEdit.placeholders.addressDetail')" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="渠道商" prop="channelMerchants">
|
|
|
|
- <el-input v-model.trim="formData.channelMerchants" placeholder="输入渠道商" />
|
|
|
|
|
|
+ <el-form-item :label="$t('message.projects.list.addOrEdit.form.channelMerchants')" prop="channelMerchants">
|
|
|
|
+ <el-input v-model.trim="formData.channelMerchants" :placeholder="$t('message.projects.list.addOrEdit.placeholders.channelMerchants')" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="关键客户" prop="customName">
|
|
|
|
- <el-input v-model.trim="formData.customName" placeholder="输入客户名称" />
|
|
|
|
|
|
+ <el-form-item :label="$t('message.projects.list.addOrEdit.form.customName')" prop="customName">
|
|
|
|
+ <el-input v-model.trim="formData.customName" :placeholder="$t('message.projects.list.addOrEdit.placeholders.customName')" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="维修公司" prop="repairCompany">
|
|
|
|
- <el-input v-model.trim="formData.repairCompany" placeholder="输入维修公司" />
|
|
|
|
|
|
+ <el-form-item :label="$t('message.projects.list.addOrEdit.form.repairCompany')" prop="repairCompany">
|
|
|
|
+ <el-input v-model.trim="formData.repairCompany" :placeholder="$t('message.projects.list.addOrEdit.placeholders.repairCompany')" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="维修电话" prop="repairMobile">
|
|
|
|
- <el-input v-model.trim="formData.repairMobile" placeholder="输入维修电话" />
|
|
|
|
|
|
+ <el-form-item :label="$t('message.projects.list.addOrEdit.form.repairMobile')" prop="repairMobile">
|
|
|
|
+ <el-input v-model.trim="formData.repairMobile" :placeholder="$t('message.projects.list.addOrEdit.placeholders.repairMobile')" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="" prop="">
|
|
<el-form-item label="" prop="">
|
|
- <el-button @click="cancel">取消</el-button>
|
|
|
|
- <el-button type="primary" @click="onSubmit">确定</el-button>
|
|
|
|
|
|
+ <el-button @click="cancel">{{ $t("message.projects.list.addOrEdit.buttons.cancel") }}</el-button>
|
|
|
|
+ <el-button type="primary" @click="onSubmit">{{ $t("message.projects.list.addOrEdit.buttons.confirm") }}</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<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, reactive, nextTick, computed } 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 { useI18n } from "vue-i18n";
|
|
|
|
+import { useStore } from "/@/store/index";
|
|
|
|
|
|
-const emit = defineEmits(['getList', 'cancel']);
|
|
|
|
|
|
+const store = useStore();
|
|
|
|
+
|
|
|
|
+const emit = defineEmits(["getList", "cancel"]);
|
|
|
|
|
|
const showDialog = ref(false);
|
|
const showDialog = ref(false);
|
|
const formRef = ref();
|
|
const formRef = ref();
|
|
|
|
+const { t } = useI18n();
|
|
|
|
|
|
// 从省市区的的树形结构中获取省市区名称
|
|
// 从省市区的的树形结构中获取省市区名称
|
|
function getNames(code: string) {
|
|
function getNames(code: string) {
|
|
- const provinceItem = data.find((item: any) => item.province === code.substring(0, 2))
|
|
|
|
- const provinceName = provinceItem.name
|
|
|
|
- const cityItem = provinceItem.children.find((item: any) => item.city === code.substring(2, 4))
|
|
|
|
- const cityName = cityItem.name
|
|
|
|
|
|
+ const provinceItem = data.find((item: any) => item.province === code.substring(0, 2));
|
|
|
|
+ const provinceName = provinceItem.name;
|
|
|
|
+ const cityItem = provinceItem.children.find((item: any) => item.city === code.substring(2, 4));
|
|
|
|
+ const cityName = cityItem.name;
|
|
|
|
|
|
if (!cityItem.children) {
|
|
if (!cityItem.children) {
|
|
- const areaItem = provinceItem.children.find((item: any) => item.area === code.substring(4, 6))
|
|
|
|
- const areaName = areaItem.name
|
|
|
|
- return `${provinceName}/${areaName}`
|
|
|
|
-
|
|
|
|
|
|
+ const areaItem = provinceItem.children.find((item: any) => item.area === code.substring(4, 6));
|
|
|
|
+ const areaName = areaItem.name;
|
|
|
|
+ return `${provinceName}/${areaName}`;
|
|
} else {
|
|
} else {
|
|
- const areaItem = cityItem.children.find((item: any) => item.area === code.substring(4, 6))
|
|
|
|
- const areaName = areaItem.name
|
|
|
|
- return `${provinceName}/${cityName}/${areaName}`
|
|
|
|
|
|
+ const areaItem = cityItem.children.find((item: any) => item.area === code.substring(4, 6));
|
|
|
|
+ const areaName = areaItem.name;
|
|
|
|
+ return `${provinceName}/${cityName}/${areaName}`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
const baseForm = {
|
|
const baseForm = {
|
|
id: undefined,
|
|
id: undefined,
|
|
- address: '',
|
|
|
|
|
|
+ address: "",
|
|
addressCode: [],
|
|
addressCode: [],
|
|
- name: '',
|
|
|
|
- addressDetail: '',
|
|
|
|
- channelMerchants: '',
|
|
|
|
- customName: '',
|
|
|
|
- repairCompany: '',
|
|
|
|
- repairMobile: '',
|
|
|
|
|
|
+ name: "",
|
|
|
|
+ addressDetail: "",
|
|
|
|
+ channelMerchants: "",
|
|
|
|
+ customName: "",
|
|
|
|
+ repairCompany: "",
|
|
|
|
+ repairMobile: "",
|
|
};
|
|
};
|
|
|
|
|
|
const formData = reactive({
|
|
const formData = reactive({
|
|
...baseForm,
|
|
...baseForm,
|
|
});
|
|
});
|
|
|
|
|
|
-const ruleForm = {
|
|
|
|
- name: [ruleRequired('不能为空')],
|
|
|
|
- addressCode: [ruleRequired('不能为空')],
|
|
|
|
- addressDetail: [ruleRequired('不能为空')],
|
|
|
|
- channelMerchants: [ruleRequired('不能为空')],
|
|
|
|
- customName: [ruleRequired('不能为空')],
|
|
|
|
- repairCompany: [ruleRequired('不能为空')],
|
|
|
|
- repairMobile: [ruleRequired('不能为空')],
|
|
|
|
-};
|
|
|
|
|
|
+const ruleForm = computed(() => {
|
|
|
|
+ return {
|
|
|
|
+ name: [ruleRequired(t("message.projects.list.addOrEdit.validation.name"))],
|
|
|
|
+ addressCode: [ruleRequired(t("message.projects.list.addOrEdit.validation.addressCode"))],
|
|
|
|
+ addressDetail: [ruleRequired(t("message.projects.list.addOrEdit.validation.addressDetail"))],
|
|
|
|
+ channelMerchants: [ruleRequired(t("message.projects.list.addOrEdit.validation.channelMerchants"))],
|
|
|
|
+ customName: [ruleRequired(t("message.projects.list.addOrEdit.validation.customName"))],
|
|
|
|
+ repairCompany: [ruleRequired(t("message.projects.list.addOrEdit.validation.repairCompany"))],
|
|
|
|
+ repairMobile: [ruleRequired(t("message.projects.list.addOrEdit.validation.repairMobile"))],
|
|
|
|
+ };
|
|
|
|
+});
|
|
|
|
|
|
const onSubmit = async () => {
|
|
const onSubmit = async () => {
|
|
await formRef.value.validate();
|
|
await formRef.value.validate();
|
|
@@ -92,17 +97,17 @@ const onSubmit = async () => {
|
|
const { addressCode } = formData;
|
|
const { addressCode } = formData;
|
|
formData.address = JSON.stringify({
|
|
formData.address = JSON.stringify({
|
|
name: getNames(addressCode[2] || addressCode[1]),
|
|
name: getNames(addressCode[2] || addressCode[1]),
|
|
- code: addressCode
|
|
|
|
- })
|
|
|
|
|
|
+ code: addressCode,
|
|
|
|
+ });
|
|
|
|
|
|
const theApi = formData.id ? api.edit : api.add;
|
|
const theApi = formData.id ? api.edit : api.add;
|
|
|
|
|
|
await theApi(formData);
|
|
await theApi(formData);
|
|
|
|
|
|
- ElMessage.success('操作成功');
|
|
|
|
|
|
+ ElMessage.success(t(`message.projects.list.addOrEdit.messages.${formData.id ? "editSuccess" : "addSuccess"}`));
|
|
// resetForm();
|
|
// resetForm();
|
|
showDialog.value = false;
|
|
showDialog.value = false;
|
|
- emit('getList');
|
|
|
|
|
|
+ emit("getList");
|
|
};
|
|
};
|
|
|
|
|
|
const resetForm = async () => {
|
|
const resetForm = async () => {
|
|
@@ -111,7 +116,7 @@ const resetForm = async () => {
|
|
};
|
|
};
|
|
|
|
|
|
const cancel = () => {
|
|
const cancel = () => {
|
|
- emit('cancel');
|
|
|
|
|
|
+ emit("cancel");
|
|
};
|
|
};
|
|
|
|
|
|
const open = async (row?: any) => {
|
|
const open = async (row?: any) => {
|