382 lines
11 KiB
Vue
382 lines
11 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="技术需求名称:" 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="请输入技术需求内容和详细的技术指标"
|
|
width="100%"
|
|
min-height="150px"
|
|
@blur="formRef.validateField(`introduce`)"
|
|
></wangEditor>
|
|
</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="成果需求预算:"
|
|
: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="请输入技术需求预算"
|
|
>
|
|
<template #append>万元</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"
|
|
>面议</el-checkbox
|
|
>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="截止时间:" prop="deadline">
|
|
<el-date-picker
|
|
style="width: 100%"
|
|
v-model="form.deadline"
|
|
type="date"
|
|
value-format="YYYY-MM-DD"
|
|
placeholder="请选择截止时间"
|
|
>
|
|
</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="请输入需求联系人"
|
|
></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"
|
|
maxlength="11"
|
|
placeholder="请输入联系人手机号"
|
|
></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="合作模式"
|
|
placeholder="合作开发、委托研发、技术转让、技术入股、技术许可"
|
|
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)">保存草稿</el-button>
|
|
<el-button type="primary" @click="submitForm(1)"
|
|
>{{ t("admin.common.submit") }}审核</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 CityOptions from "@/views/components/CityOptions";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import FieldOptions from "@/views/components/FieldOptions";
|
|
import InputBoxAdd from "@/views/components/InputBoxAdd";
|
|
import { onMounted, reactive, 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: "需求名称不能为空", trigger: "blur" }],
|
|
introduce: [
|
|
{ required: true, message: "需求描述不能为空", trigger: "change" },
|
|
],
|
|
name: [{ required: true, message: "需求联系人不能为空", trigger: "blur" }],
|
|
mobile: [
|
|
{ required: true, message: "联系人手机号不能为空", trigger: "blur" },
|
|
{
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
message: "手机号格式不正确",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
commitUserName: [
|
|
{ required: true, message: "需求提交人不能为空", trigger: "blur" },
|
|
],
|
|
kinds: [
|
|
{ required: true, message: "至少选择一个需求类别", trigger: "change" },
|
|
],
|
|
budget: [{ required: true, message: "需求预算不能为空", trigger: "blur" }],
|
|
deadline: [
|
|
{
|
|
required: true,
|
|
message: "请选择截止时间",
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
commitUserPhone: [
|
|
{ required: true, message: "需求提交人手机号不能为空", trigger: "blur" },
|
|
],
|
|
},
|
|
});
|
|
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
const labelWidth = 160;
|
|
// const isContainOther = ref(false);
|
|
const checkList = reactive([
|
|
{
|
|
id: 1,
|
|
name: "成果推广",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "关键成果解决",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "对接专家院士",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "上市辅导",
|
|
},
|
|
]);
|
|
|
|
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 && cityFormValid) {
|
|
if (route.query.id) {
|
|
await updateTechnologyDemand(form.value);
|
|
ElMessage.success("修改企业需求成功");
|
|
} else {
|
|
await insertTechnologyDemand(form.value);
|
|
ElMessage.success("新增企业需求成功");
|
|
}
|
|
updateCount("technology");
|
|
backToList();
|
|
} else {
|
|
console.log("校验未通过");
|
|
}
|
|
// 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("修改成功");
|
|
// // proxy.$router.go(-1);
|
|
// // });
|
|
// } else {
|
|
// // addPost(form.value).then((response) => {
|
|
// // proxy.$modal.msgSuccess("新增成功");
|
|
// // 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: "修改技术需求" });
|
|
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>
|