508 lines
14 KiB
Vue
508 lines
14 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('routes.company.technicalDemand'),
|
||
})
|
||
"
|
||
prop="title"
|
||
>
|
||
<el-input v-model="form.title"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- <el-row>
|
||
<el-col :span="24">
|
||
// <el-checkbox label="0" @change="handleCheck">其他</el-checkbox>
|
||
<el-form-item :label="t('admin.form.category', {type:t('admin.common.demand')})" prop="kinds">
|
||
<el-checkbox-group v-model="form.kinds">
|
||
<el-checkbox
|
||
v-for="item in checkList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
>{{ item.name }}</el-checkbox
|
||
>
|
||
</el-checkbox-group>
|
||
<el-row :gutter="20">
|
||
<el-col :span="20">
|
||
<el-input
|
||
v-model="checkInput"
|
||
placeholder="请输入需求类别"
|
||
></el-input>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button type="primary" @click="addCheck">添加</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="introduce"
|
||
>
|
||
<!-- <wangEditor
|
||
v-model="form.introduce"
|
||
:placeholder="t('webSearch.pleaseEnterTheContentOfTheTechnicalRequirementsAndTheDetailedTechnicalIndicators')"
|
||
width="100%"
|
||
min-height="150px"
|
||
@blur="formRef.validateField(`introduce`)"
|
||
></wangEditor>-->
|
||
<el-input
|
||
type="textarea"
|
||
v-model="form.introduce"
|
||
:autosize="{ minRows: 6, maxRows: 8 }"
|
||
:placeholder="
|
||
t(
|
||
'webSearch.pleaseEnterTheContentOfTheTechnicalRequirementsAndTheDetailedTechnicalIndicators'
|
||
)
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<field-options
|
||
v-model="form"
|
||
:labelWidth="labelWidth"
|
||
ref="fieldFormRef"
|
||
/>
|
||
<!--<city-options
|
||
v-model="form"
|
||
:labelWidth="labelWidth"
|
||
ref="cityFormRef"
|
||
></city-options>-->
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
:label="t('admin.form.achievementDemandBudget')"
|
||
:prop="form.budgetMode == 1 ? 'budget' : ''"
|
||
>
|
||
<el-input
|
||
v-model="form.budget"
|
||
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
|
||
:placeholder="
|
||
t('admin.form.placeholder', {
|
||
type: t('admin.form.technicalDemandBudget'),
|
||
})
|
||
"
|
||
>
|
||
<template #append
|
||
>{{ t("admin.table.tenThousandYuan") }}
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label-width="50px">
|
||
<el-checkbox
|
||
false-label="1"
|
||
true-label="2"
|
||
v-model="form.budgetMode"
|
||
>{{ t("tips.faceToFace") }}
|
||
</el-checkbox>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item :label="t('admin.table.deadline')" prop="deadline">
|
||
<el-date-picker
|
||
style="width: 100%"
|
||
v-model="form.deadline"
|
||
type="date"
|
||
value-format="YYYY-MM-DD"
|
||
:placeholder="
|
||
t('admin.form.pleaseSelect', {
|
||
type: t('admin.table.deadline'),
|
||
})
|
||
"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<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">
|
||
<!-- maxlength="11"-->
|
||
<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="需求提交人:" prop="commitUserName">
|
||
<el-input
|
||
v-model="form.commitUserName"
|
||
placeholder="请输入需求提交人"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="需求提交人手机号:" prop="commitUserPhone">
|
||
<el-input
|
||
v-model="form.commitUserPhone"
|
||
placeholder="请输入需求提交人手机号"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row> -->
|
||
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<input-box-add
|
||
class="cooperation-mode"
|
||
:labelWidth="labelWidth"
|
||
v-model="form"
|
||
:title="t('webSearch.cooperationMode')"
|
||
:placeholder="t('admin.table.cooperationType')"
|
||
fieldKey="wants"
|
||
ref="directionsFormRef"
|
||
/>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<!-- <div :style="{ marginLeft: labelWidth + 'px' }">
|
||
<el-button @click="router.go(-1)">{{ t("admin.common.cancel") }}</el-button>
|
||
<el-button type="primary" @click="submitForm">{{ t('admin.common.submit') }}</el-button>
|
||
</div> -->
|
||
<div :style="{ marginLeft: labelWidth + 'px' }">
|
||
<el-button type="primary" @click="submitForm(3)"
|
||
>{{ t("admin.form.saveDraft") }}
|
||
</el-button>
|
||
<el-button type="primary" @click="submitForm(1)"
|
||
>{{ t("admin.common.submitAudit") }}
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
// import { expert } from "@/api/identity/index";
|
||
import { insertTechnologyDemand } from "@/api/admin/enterprise";
|
||
import { useI18n } from "vue-i18n";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
import FieldOptions from "@/views/components/FieldOptions";
|
||
import InputBoxAdd from "@/views/components/InputBoxAdd";
|
||
import {
|
||
computed,
|
||
getCurrentInstance,
|
||
onMounted,
|
||
reactive,
|
||
ref,
|
||
toRefs,
|
||
} from "vue";
|
||
import { ElMessage } from "element-plus";
|
||
import { updateCount } from "@/api/admin/count";
|
||
import {
|
||
getTechnologyDemand,
|
||
updateTechnologyDemand,
|
||
} from "@/api/admin/enterprise/demand";
|
||
import tab from "@/plugins/tab";
|
||
|
||
const { t } = useI18n();
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const data = reactive({
|
||
form: {
|
||
check: [],
|
||
},
|
||
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",
|
||
},
|
||
],
|
||
introduce: [
|
||
{
|
||
required: true,
|
||
/*"需求描述不能为空"*/
|
||
message: computed(() =>
|
||
t("admin.validation.required", {
|
||
type: t("webSearch.demandDescription"),
|
||
})
|
||
),
|
||
trigger: "change",
|
||
},
|
||
],
|
||
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.demandContact"),
|
||
})
|
||
),
|
||
trigger: "blur",
|
||
},
|
||
// {
|
||
// pattern: /^1[3456789]\d{9}$/,
|
||
// message: "手机号格式不正确",
|
||
// trigger: "blur",
|
||
// },
|
||
],
|
||
commitUserName: [
|
||
{
|
||
required: true,
|
||
message: computed(() =>
|
||
t("admin.validation.required", {
|
||
type: t("webContact.demandContact"),
|
||
})
|
||
),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
kinds: [
|
||
{
|
||
required: true,
|
||
message: computed(() =>
|
||
t("admin.form.pleaseSelect", { type: t("webContact.demandType") })
|
||
),
|
||
trigger: "change",
|
||
},
|
||
],
|
||
budget: [
|
||
{
|
||
required: true,
|
||
message: computed(() =>
|
||
t("admin.validation.required", { type: t("webContact.demandBudget") })
|
||
),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
deadline: [
|
||
{
|
||
required: true,
|
||
message: computed(() =>
|
||
t("admin.form.pleaseSelect", { type: t("admin.table.deadline") })
|
||
),
|
||
trigger: ["change", "blur"],
|
||
},
|
||
],
|
||
commitUserPhone: [
|
||
{
|
||
required: true,
|
||
message: computed(() =>
|
||
t("admin.validation.required", {
|
||
type: t("admin.form.demandSubmitterPhone"),
|
||
})
|
||
),
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
},
|
||
});
|
||
|
||
const { queryParams, form, rules } = toRefs(data);
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
const labelWidth = 160;
|
||
// const isContainOther = ref(false);
|
||
const checkList = reactive([
|
||
{
|
||
id: 1,
|
||
name: "成果推广",
|
||
nameRu: "Продвижение достижений",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "关键成果解决",
|
||
nameRu: "Решение ключевых результатов",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "对接专家院士",
|
||
nameRu: "Связь с экспертами и академиками",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "上市辅导",
|
||
nameRu: "Помощь в выходе на рынок",
|
||
},
|
||
]);
|
||
|
||
const formRef = ref(null);
|
||
const fieldFormRef = ref(null);
|
||
const directionsFormRef = ref(null);
|
||
// const cityFormRef = ref(null);
|
||
const checkInput = ref("");
|
||
const submitForm = async (status) => {
|
||
let formValid;
|
||
try {
|
||
formValid = await formRef.value.validate();
|
||
} catch (error) {
|
||
formValid = false;
|
||
}
|
||
form.value.status = status;
|
||
const fieldFormValid = await fieldFormRef.value.validateForm();
|
||
const directionsFormValid = await directionsFormRef.value.validateForm();
|
||
// const cityFormValid = await cityFormRef.value.validateForm();
|
||
if (formValid && fieldFormValid && directionsFormValid) {
|
||
if (route.query.id) {
|
||
await updateTechnologyDemand(form.value);
|
||
ElMessage.success(t("admin.common.EditSuccess"));
|
||
} else {
|
||
await insertTechnologyDemand(form.value);
|
||
ElMessage.success(t("admin.common.AddSuccess"));
|
||
}
|
||
updateCount("technology");
|
||
backToList();
|
||
} else {
|
||
console.log("validation failed");
|
||
}
|
||
// formRef.value.validate(async (valid) => {
|
||
// // console.log(valid);
|
||
// if (valid) {
|
||
// form.value.amount = form.value.amount - 0;
|
||
// }
|
||
// form.value.amount = form.value.amount - 0;
|
||
// const cityForm = proxy.$refs.cityForm.submitForm(); // 城市
|
||
// if (valid && cityForm) {
|
||
// console.log(form.value);
|
||
// if (form.value.id != undefined) {
|
||
// // updatePost(form.value).then((response) => {
|
||
// // proxy.$modal.msgSuccess(t('admin.common.editSuccess'));
|
||
// // proxy.$router.go(-1);
|
||
// // });
|
||
// } else {
|
||
// // addPost(form.value).then((response) => {
|
||
// // proxy.$modal.msgSuccess(t('admin.common.addSuccess'));
|
||
// // proxy.$router.go(-1);
|
||
// // });
|
||
// }
|
||
// }
|
||
// });
|
||
};
|
||
// function addCheck() {
|
||
// if (!checkInput.value.trim().length) return proxy.$modal.msgError("请输入");
|
||
// const flag = checkList.some((item) => {
|
||
// return item.name.trim() == checkInput.value.trim();
|
||
// });
|
||
// if (!flag) {
|
||
// checkList.push({
|
||
// id: checkList.length + 1,
|
||
// name: checkInput.value,
|
||
// });
|
||
// checkInput.value = "";
|
||
// }
|
||
// }
|
||
// 返回技术需求列表
|
||
const backToList = () => {
|
||
tab.closeOpenPage({ path: "/demand/technology" });
|
||
};
|
||
|
||
onMounted(() => {
|
||
formRef.value.resetFields();
|
||
|
||
if (route.query.id) {
|
||
const obj = Object.assign({}, route, {
|
||
title: t("admin.form.edit", {
|
||
type: t("webSearch.technologyDemand"),
|
||
}),
|
||
});
|
||
tab.updatePage(obj);
|
||
getTechnologyDemand({ id: route.query.id }).then((resp) => {
|
||
form.value = resp.data;
|
||
|
||
if (!form.value.kinds) {
|
||
form.value.kinds = resp.data.kind?.split(",") ?? [];
|
||
form.value.kinds.forEach((el, index) => {
|
||
if (!checkList.find((item) => item.name == el)) {
|
||
checkList.push({
|
||
id: index,
|
||
name: el,
|
||
});
|
||
}
|
||
});
|
||
}
|
||
if (!form.value.wants) {
|
||
form.value.wants = resp.data.want?.split(",") ?? [];
|
||
}
|
||
});
|
||
} else {
|
||
form.value = {
|
||
check: [],
|
||
};
|
||
if (formRef.value) {
|
||
formRef.value.resetFields();
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
:deep(.cooperation-mode) {
|
||
.input-add-bar {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|