<script setup lang="ts">
|
import { onMounted, ref, reactive } from "vue";
|
import ReCol from "@/components/ReCol";
|
import { formRules } from "./utils/rule";
|
import { FormProps } from "./utils/types";
|
import { usePublicHooks } from "../hooks";
|
import { useDept } from "./utils/hook";
|
import { Operation } from "@element-plus/icons-vue";
|
import { getCaigoufangshiList } from "@/api/item/index";
|
|
const { state } = useDept();
|
let cascaderRef = ref();
|
const props = withDefaults(defineProps<FormProps>(), {
|
formInline: () => ({
|
id: "",
|
projectCode: "", // 项目编号（必填）
|
projectName: "", // 项目名称（必填）
|
hangyepinmu: null, // 行业品目（可选）
|
caigoufangshi: null, // 采购方式（可选）
|
caigouyusuan: null, // 采购预算（可选）
|
dingbiaoguize: null, // 定标规则（可选）
|
baomingfei: null, // 报名费（可选）
|
toubiaobaozhengjin: null, // 投标保证金（可选）
|
lianhetitoubiao: null, // 联合体投标（可选）
|
kaibiaofangshi: "纸质标", // 开标方式（可选）
|
shifoufenbao: "false", // 是否分包（可选）
|
shifoutuisongxuanchuan: "true", // 是否推送宣传（可选）
|
caigourenmingcheng: null, // 采购人名称（可选）
|
xingzhengquyu: [], // 行政区域（可选）
|
xingzhengquyuName: null, // 行政区域名称（可选）
|
jigoudaima: null, // 机构代码（可选）
|
daimaleixing: null, // 代码类型（可选）
|
lianxiren: null, // 联系人（可选）
|
lianxidianhua: null, // 联系电话（可选）
|
tongxindizhi: null, // 通信地址（可选）
|
dianziyoujian: null, // 电子邮件（可选）
|
xiangmujingbanren: null, // 项目经办人（可选）
|
zhiwu: null, // 职务（可选）
|
jingbanrendianhua: null, // 经办人电话（可选）
|
dailijigoumingcheng: null, // 代理机构名称（可选）
|
dailiLianxiren: null, // 代理机构联系人（可选）
|
dailiLianxidianhua: null, // 代理机构联系电话（可选）
|
dailiDianziyoujian: null, // 代理机构电子邮件（可选）
|
dailiTongxindizhi: null, // 代理机构通信地址（可选）
|
dailiXiangmujingli: null, // 代理机构项目经理（可选
|
dailijingliLianxidianhua: null // 代理机构项目经理联系电话（可选）
|
})
|
});
|
|
const ruleFormRef = ref();
|
const { switchStyle } = usePublicHooks();
|
const newFormInline = ref(props.formInline);
|
|
function getRef() {
|
return ruleFormRef.value;
|
}
|
const handleChange = value => {
|
console.log(
|
value,
|
cascaderRef.value.getCheckedNodes()[0].pathLabels.join(" / "),
|
123
|
);
|
};
|
defineExpose({ getRef });
|
onMounted(async () => {});
|
</script>
|
|
<template>
|
<el-form
|
ref="ruleFormRef"
|
:model="newFormInline"
|
:rules="formRules"
|
label-width="110px"
|
>
|
<el-row :gutter="30">
|
<re-col>
|
<p class="flex items-center">
|
<el-icon color="#409EFF" class="m-2" size="large">
|
<Operation />
|
</el-icon>
|
<el-text class="mx-1" size="large" type="primary" tag="b">
|
项目信息
|
</el-text>
|
</p>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="项目名称" prop="projectName">
|
<el-input
|
v-model="newFormInline.projectName"
|
clearable
|
placeholder="请输入项目名称"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="项目编号" prop="projectCode">
|
<el-input
|
v-model="newFormInline.projectCode"
|
clearable
|
placeholder="请输入项目编号"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="行业品目" prop="hangyepinmu">
|
<el-select
|
v-model="newFormInline.hangyepinmu"
|
placeholder="请选择行业品目"
|
clearable
|
class="w-[100%]!"
|
>
|
<el-option
|
v-for="item in state.hangyepingmuList"
|
:key="item.id"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="采购方式" prop="caigoufangshi">
|
<el-select
|
v-model="newFormInline.caigoufangshi"
|
placeholder="请选择采购方式"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in state.caigoufangshiList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</re-col>
|
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="采购预算" prop="caigouyusuan">
|
<el-input
|
v-model="newFormInline.caigouyusuan"
|
clearable
|
placeholder="请输入采购预算"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="成交方法" prop="dingbiaoguize">
|
<!-- <el-checkbox-group
|
v-model="newFormInline.dingbiaoguize"
|
placeholder="请选择状态"
|
clearable
|
class="w-[100%]!"
|
>
|
<el-checkbox label="最低价" value="最低价" />
|
<el-checkbox label="综合评分" value="综合评分" />
|
</el-checkbox-group> -->
|
<el-radio-group v-model="newFormInline.dingbiaoguize">
|
<el-radio value="最低价">最低价</el-radio>
|
<el-radio value="综合评分">综合评分</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="报名费" prop="baomingfei">
|
<el-input
|
v-model="newFormInline.baomingfei"
|
clearable
|
placeholder="请输入报名费"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="投标保证金" prop="toubiaobaozhengjin">
|
<el-input
|
v-model="newFormInline.toubiaobaozhengjin"
|
clearable
|
placeholder="请输入投标保证金"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="联合体投标" prop="lianhetitoubiao">
|
<el-radio-group v-model="newFormInline.lianhetitoubiao">
|
<el-radio value="支持">支持</el-radio>
|
<el-radio value="不支持">不支持</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="开标方式" prop="kaibiaofangshi">
|
<el-radio-group v-model="newFormInline.kaibiaofangshi">
|
<el-radio value="纸质标">纸质标</el-radio>
|
<el-radio value="电子标">电子标</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="是否分包" prop="shifoufenbao">
|
<el-radio-group v-model="newFormInline.shifoufenbao">
|
<el-radio value="true">是</el-radio>
|
<el-radio value="false">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="是否推送宣传" prop="shifoutuisongxuanchuan">
|
<el-radio-group v-model="newFormInline.shifoutuisongxuanchuan">
|
<el-radio value="true">是</el-radio>
|
<el-radio value="false">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</re-col>
|
|
<re-col>
|
<p class="flex items-center">
|
<el-icon color="#409EFF" class="m-2" size="large">
|
<Operation />
|
</el-icon>
|
<el-text class="mx-1" size="large" type="primary" tag="b">
|
采购人信息
|
</el-text>
|
</p>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="采购人名称" prop="caigourenmingcheng">
|
<el-input
|
v-model="newFormInline.caigourenmingcheng"
|
clearable
|
placeholder="请输入采购人名称"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="行政区域" prop="xingzhengquyu">
|
<el-cascader
|
:ref="cascaderRef"
|
v-model="newFormInline.xingzhengquyu"
|
class="w-full"
|
:options="state.regionList"
|
:props="{
|
value: 'code',
|
label: 'name',
|
children: 'regions'
|
}"
|
clearable
|
filterable
|
placeholder="请选择区域"
|
@change="handleChange"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="机构代码" prop="jigoudaima">
|
<el-input
|
v-model="newFormInline.jigoudaima"
|
clearable
|
placeholder="请输入机构代码"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="代码类型" prop="daimaleixing">
|
<el-select
|
v-model="newFormInline.daimaleixing"
|
placeholder="请选择代码类型"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in state.daimaleixingList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="联系人" prop="lianxiren">
|
<el-input
|
v-model="newFormInline.lianxiren"
|
clearable
|
placeholder="请输入联系人"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="联系人电话" prop="lianxidianhua">
|
<el-input
|
v-model="newFormInline.lianxidianhua"
|
clearable
|
placeholder="请输入联系人电话"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="12" :xs="24" :sm="24">
|
<el-form-item label="通信地址" prop="tongxindizhi">
|
<el-input
|
v-model="newFormInline.tongxindizhi"
|
clearable
|
placeholder="请输入通信地址"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="电子邮箱" prop="dianziyoujian">
|
<el-input
|
v-model="newFormInline.dianziyoujian"
|
clearable
|
placeholder="请输入电子邮箱"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="项目经办人" prop="xiangmujingbanren">
|
<el-input
|
v-model="newFormInline.xiangmujingbanren"
|
clearable
|
placeholder="请输入项目经办人"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="职务" prop="zhiwu">
|
<el-input
|
v-model="newFormInline.zhiwu"
|
clearable
|
placeholder="请输入职务"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="经办人电话" prop="jingbanrendianhua">
|
<el-input
|
v-model="newFormInline.jingbanrendianhua"
|
clearable
|
placeholder="请输入经办人电话"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col>
|
<p class="flex items-center">
|
<el-icon color="#409EFF" class="m-2" size="large">
|
<Operation />
|
</el-icon>
|
<el-text class="mx-1" size="large" type="primary" tag="b">
|
代理机构信息
|
</el-text>
|
</p>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="代理机构名称" prop="dailijigoumingcheng">
|
<el-input
|
v-model="newFormInline.dailijigoumingcheng"
|
clearable
|
placeholder="请输入代理机构名称"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="联系人" prop="dailiLianxiren">
|
<el-input
|
v-model="newFormInline.dailiLianxiren"
|
clearable
|
placeholder="请输入联系人"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="联系电话" prop="dailiLianxidianhua">
|
<el-input
|
v-model="newFormInline.dailiLianxidianhua"
|
clearable
|
placeholder="请输入联系电话"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="电子邮箱" prop="dailiDianziyoujian">
|
<el-input
|
v-model="newFormInline.dailiDianziyoujian"
|
clearable
|
placeholder="请输入电子邮箱"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="12" :xs="24" :sm="24">
|
<el-form-item label="通信地址" prop="dailiTongxindizhi">
|
<el-input
|
v-model="newFormInline.dailiTongxindizhi"
|
clearable
|
placeholder="请输入通信地址"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="项目经理" prop="dailiXiangmujingli">
|
<el-input
|
v-model="newFormInline.dailiXiangmujingli"
|
clearable
|
placeholder="请输入项目经理"
|
/>
|
</el-form-item>
|
</re-col>
|
<re-col :value="6" :xs="24" :sm="24">
|
<el-form-item label="联系电话" prop="dailijingliLianxidianhua">
|
<el-input
|
v-model="newFormInline.dailijingliLianxidianhua"
|
clearable
|
placeholder="请输入联系电话"
|
/>
|
</el-form-item>
|
</re-col>
|
</el-row>
|
</el-form>
|
</template>
|
