Files
2023-08-01 15:50:13 +08:00

343 lines
9.8 KiB
Vue

<template>
<div class="app-container">
<el-card shadow="always" style="width: 55%; margin: 0 auto">
<el-form
ref="formRef"
:model="form"
:rules="rules"
:label-width="labelWidth + 'px'"
>
<p>
<b> {{ t("admin.form.basicInfo") }}</b>
</p>
<!-- <el-row>
<el-col :span="24">
<el-form-item :label="t('admin.form.name', {type:t('admin.common.demand')})" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :span="24">
<el-form-item :label="t('admin.common.demandCategory')">
<el-checkbox-group v-model="form.kinds">
<el-checkbox
v-for="item in checkList"
:key="item.id"
:label="
locale === 'zh'
? item.name
: locale === 'ru'
? item.nameRu
: null
"
>{{
locale === "zh"
? item.name
: locale === "ru"
? item.nameRu
: null
}}
</el-checkbox>
<!-- <el-checkbox label="0" @change="handleCheck">其他</el-checkbox> -->
</el-checkbox-group>
<el-row :gutter="20">
<el-col :span="20">
<el-input
v-model="checkInput"
:placeholder="
/*请输入需求类别*/
t('admin.form.placeholder', {
type: t('admin.common.demandCategory'),
})
"
></el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addCheck">
<!--添加-->
{{ t("admin.common.add") }}
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item
:label="t('webSearch.demandDescription')"
prop="description"
>
<el-input
type="textarea"
v-model="form.description"
:autosize="{ minRows: 6, maxRows: 8 }"
:placeholder="
t('admin.form.placeholder', {
type: t('webSearch.demandDescription'),
})
"
></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <CityOptions
v-model="form"
:labelWidth="labelWidth"
ref="cityFormRef"
/> -->
<el-row>
<el-col :span="12">
<el-form-item :label="t('admin.form.demandContact')" prop="name">
<el-input
v-model="form.name"
:placeholder="
t('admin.form.placeholder', {
type: t('admin.form.demandContact'),
})
"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="t('admin.form.contactPhone')" prop="mobile">
<el-input
v-model="form.mobile"
:placeholder="
t('admin.form.placeholder', {
type: t('admin.form.contactPhone'),
})
"
></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item-->
<!-- :label="t('admin.table.demandSubmitter')"-->
<!-- prop="commitUserName"-->
<!-- >-->
<!-- <el-input-->
<!-- v-model="form.commitUserName"-->
<!-- :placeholder="-->
<!-- t('admin.form.placeholder', {-->
<!-- type: t('admin.table.demandSubmitter'),-->
<!-- })-->
<!-- "-->
<!-- ></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item-->
<!-- :label="t('admin.form.demandSubmitterPhone')"-->
<!-- prop="commitPhone"-->
<!-- >-->
<!-- <el-input-->
<!-- v-model="form.commitPhone"-->
<!-- :placeholder="t('admin.form.demandSubmitterPhone')"-->
<!-- ></el-input>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
</el-form>
<div :style="{ marginLeft: labelWidth + 'px' }">
<el-button @click="backToList"
>{{ t("admin.common.cancel") }}
</el-button>
<el-button type="primary" @click="submitForm"
>{{ t("admin.common.submit") }}
</el-button>
</div>
</el-card>
</div>
</template>
<script setup>
import tab from "@/plugins/tab";
import {
getDemand,
insertDemand,
updateDemand,
} from "@/api/admin/enterprise/demand";
import { toTitleCase } from "@/utils/string";
import { ElMessage } from "element-plus";
import { computed, onMounted, reactive, ref, toRefs } from "vue";
import { demandCategoryList } from "@/utils/parameter";
import { useRoute, useRouter } from "vue-router";
import { updateCount } from "@/api/admin/count";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const router = useRouter();
const route = useRoute();
const data = reactive({
form: {
check: [],
status: 1,
},
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
},
rules: {
title: [
{
required: true,
/*"需求名称不能为空"*/
message: computed(() =>
t("admin.validation.required", {
type: t("admin.form.name", {
type: t("admin.common.demand"),
}),
})
),
trigger: "blur",
},
],
description: [
{
required: true,
/*"需求描述不能为空"*/
message: computed(() =>
t("admin.validation.required", {
type: t("webSearch.demandDescription"),
})
),
trigger: "blur",
},
],
name: [
{
required: true,
/*"需求联系人不能为空"*/
message: computed(() =>
t("admin.validation.required", {
type: t("admin.form.demandContact"),
})
),
trigger: "blur",
},
],
mobile: [
{
required: true,
/*"联系人手机号不能为空"*/
message: computed(() =>
t("admin.validation.required", {
type: t("admin.form.contactPhone"),
})
),
trigger: "blur",
},
],
username: [
{
required: true,
message: computed(() => t("webContact.demandSubmit")),
trigger: "blur",
},
],
userPhone: [
{
required: true,
/*"手机号不能为空"*/
message: computed(() =>
t("admin.validation.required", { type: t("admin.form.mobile") })
),
trigger: "blur",
},
],
},
});
const { form, rules } = toRefs(data);
const labelWidth = 140;
const checkList = reactive([...demandCategoryList]);
const checkInput = ref("");
// const cityFormRef = ref();
const formRef = ref();
const submitForm = () => {
formRef.value.validate(async (valid) => {
// const cityFormValid = cityFormRef.value.validateForm(); // 城市
if (valid) {
if (form.value.id != undefined) {
await updateDemand(form.value);
ElMessage.success(t("admin.common.editSuccess"));
// router.back();
} else {
await insertDemand(form.value);
ElMessage.success(t("admin.common.AddSuccess"));
// router.back();
updateCount("service");
}
backToList();
}
});
};
// 返回服务需求列表
const backToList = () => {
tab.closeOpenPage({ path: "/demand/serviceDemand" });
};
// 添加需求类别时验证
function addCheck() {
if (!checkInput.value.trim().length) return ElMessage.error(t("input.input"));
const flag = checkList.some((item) => {
return item.name.trim() == checkInput.value.trim();
});
if (!flag) {
const nameField =
locale.value === "zh" ? "name" : `name${toTitleCase(locale.value)}`;
checkList.push({
id: checkList.length + 1,
[nameField]: checkInput.value,
});
checkInput.value = "";
}
}
onMounted(() => {
formRef.value.resetFields();
if (route.query.id) {
const obj = Object.assign({}, route, { title: "修改服务需求" });
tab.updatePage(obj);
getDemand({ id: route.query.id }).then((resp) => {
// const nameField = locale === "zh" ? "name" : "nameRu";
console.log(locale.value);
const nameField =
locale.value === "zh" ? "name" : `name${toTitleCase(locale.value)}`;
if (resp.data.kinds) {
resp.data.kinds.forEach((el, index) => {
if (!checkList.find((item) => item[nameField] === el)) {
checkList.push({
id: index,
[nameField]: el,
});
}
});
}
form.value = resp.data;
});
} else {
form.value = {
check: [],
status: 0,
};
if (formRef.value) {
formRef.value.resetFields();
}
}
});
</script>