420 lines
14 KiB
Vue
420 lines
14 KiB
Vue
<template>
|
|
<div class="container-body">
|
|
<t-form
|
|
ref="searchform"
|
|
:data="formData"
|
|
style="padding: 16px; background-color: #fff"
|
|
label-width="calc(8em + 8px)"
|
|
@submit="onQuery"
|
|
@reset="onReset"
|
|
>
|
|
<div>
|
|
<t-row :gutter="16">
|
|
<t-col :span="3">
|
|
<t-form-item label="发布时间起" name="fbsjq">
|
|
<t-date-picker style="width: 100%" v-model="formData.fbsjq" clearable />
|
|
</t-form-item>
|
|
</t-col>
|
|
<t-col :span="3">
|
|
<t-form-item label="发布时间止" name="fbsjz">
|
|
<t-date-picker style="width: 100%" v-model="formData.fbsjz" clearable />
|
|
</t-form-item>
|
|
</t-col>
|
|
<t-col :span="3">
|
|
<t-form-item label="内容" name="nr">
|
|
<t-input v-model="formData.nr" placeholder="内容"></t-input>
|
|
</t-form-item>
|
|
</t-col>
|
|
<t-col :span="3">
|
|
<div style="width: 100%; margin-left: 16px; text-align: left">
|
|
<t-space :size="12">
|
|
<div class="czbtn"><t-button theme="default" type="reset">重置</t-button></div>
|
|
<div class="czbtn"><t-button theme="primary" type="submit">查询</t-button></div>
|
|
</t-space>
|
|
</div>
|
|
</t-col>
|
|
</t-row>
|
|
</div>
|
|
<div class="search-line"></div>
|
|
</t-form>
|
|
<!-- <div class="py-4"><t-button theme="primary" @click="reactqyglxx()">新增</t-button></div> -->
|
|
<div class="table-box" style="padding: 16px; background-color: #fff">
|
|
<div class="table-toolbar">
|
|
<t-button theme="primary" @click="handlePublish">发布需求</t-button>
|
|
</div>
|
|
<t-table
|
|
class="add-edit-table"
|
|
ref="tableRef"
|
|
row-key="glid"
|
|
:columns="columns"
|
|
:scroll="{ type: 'horizontal' }"
|
|
table-layout="fixed"
|
|
:data="list"
|
|
:pagination="pagination"
|
|
hover
|
|
>
|
|
<template #sjzt="{ row }">
|
|
<span>{{ row.sjzt == 'Y' ? '上架' : '下架' }}</span>
|
|
</template>
|
|
<template #ywlxDm="{ row }">
|
|
<span>{{ row.ywlxDm == '01' ? '供给服务' : '需求服务' }}</span>
|
|
</template>
|
|
<template #cz="{ row }">
|
|
<span variant="text" theme="primary" class="czBtn" @click="changeSjzt(row)">{{
|
|
row.sjzt === 'Y' ? '下架' : '上架'
|
|
}}</span>
|
|
</template>
|
|
</t-table>
|
|
</div>
|
|
|
|
<!-- 发布需求弹窗 -->
|
|
<t-dialog
|
|
:visible.sync="publishVisible"
|
|
header="发布碳服务需求"
|
|
:closeOnOverlayClick="true"
|
|
:footer="false"
|
|
width="600px"
|
|
@close="onPublishClose"
|
|
class="global-dialog"
|
|
>
|
|
<div class="publish-form">
|
|
<t-form
|
|
:rules="publishRules"
|
|
:data="publishFormData"
|
|
ref="publishFormRef"
|
|
labelAlign="top"
|
|
>
|
|
<t-row :gutter="16">
|
|
<t-col :span="12">
|
|
<t-form-item label="需求标题" name="bt1">
|
|
<t-input v-model="publishFormData.bt1" placeholder="请输入需求标题" clearable />
|
|
</t-form-item>
|
|
</t-col>
|
|
<t-col :span="12">
|
|
<t-form-item label="需求类型" name="fwlxjh">
|
|
<t-select v-model="publishFormData.fwlxjh" :options="xqlxOptions" placeholder="请选择需求类型" clearable />
|
|
</t-form-item>
|
|
</t-col>
|
|
</t-row>
|
|
|
|
<t-row :gutter="16">
|
|
<t-col :span="12">
|
|
<t-form-item label="所属行业" name="sshy">
|
|
<t-select v-model="publishFormData.sshy" :options="sshyDmOptions" placeholder="请选择所属行业" clearable />
|
|
</t-form-item>
|
|
</t-col>
|
|
<t-col :span="12">
|
|
<t-form-item label="预算范围" name="ysfwDm1">
|
|
<t-select v-model="publishFormData.ysfwDm1" :options="ysfwDm1Options" placeholder="请选择预算范围" clearable />
|
|
</t-form-item>
|
|
</t-col>
|
|
</t-row>
|
|
|
|
<t-row :gutter="16">
|
|
<t-col :span="12">
|
|
<t-form-item label="期望完成时间" name="qwwcsj">
|
|
<t-date-picker
|
|
v-model="publishFormData.qwwcsj"
|
|
placeholder="请选择期望完成时间"
|
|
style="width: 100%"
|
|
clearable
|
|
/>
|
|
</t-form-item>
|
|
</t-col>
|
|
<t-col :span="12">
|
|
<t-form-item label="服务地区" name="fwfw">
|
|
<t-select v-model="publishFormData.fwfw" :options="fwfwOptions" placeholder="请选择服务地区" clearable />
|
|
</t-form-item>
|
|
</t-col>
|
|
</t-row>
|
|
|
|
<t-form-item label="需求详细描述" name="fwnr">
|
|
<t-textarea v-model="publishFormData.fwnr" placeholder="请填写需求详细描述" :maxlength="100" />
|
|
</t-form-item>
|
|
|
|
<t-form-item label="标签" name="bqjh">
|
|
<t-select
|
|
v-model="publishFormData.bqjh"
|
|
:max="4"
|
|
:options="bqOptions"
|
|
placeholder="请选择标签"
|
|
multiple
|
|
clearable
|
|
/>
|
|
</t-form-item>
|
|
|
|
<t-row :gutter="16">
|
|
<t-col :span="8">
|
|
<t-form-item label="联系人" name="lxr">
|
|
<t-input v-model="publishFormData.lxr" placeholder="请输入联系人" />
|
|
</t-form-item>
|
|
</t-col>
|
|
<t-col :span="8">
|
|
<t-form-item label="联系电话" name="lxdh">
|
|
<t-input v-model="publishFormData.lxdh" placeholder="请输入联系电话" />
|
|
</t-form-item>
|
|
</t-col>
|
|
<t-col :span="8">
|
|
<t-form-item label="电子邮箱" name="email">
|
|
<t-input v-model="publishFormData.email" placeholder="请输入电子邮箱" />
|
|
</t-form-item>
|
|
</t-col>
|
|
</t-row>
|
|
</t-form>
|
|
|
|
<div class="form-actions">
|
|
<t-button theme="primary" type="button" @click="handlePublishSubmit">提交发布</t-button>
|
|
</div>
|
|
</div>
|
|
</t-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { LocationIcon, TimeIcon } from 'tdesign-icons-vue';
|
|
import api from '../../api/gxzx/index';
|
|
export default {
|
|
name: 'HomePage',
|
|
components: { LocationIcon, TimeIcon },
|
|
|
|
data() {
|
|
return {
|
|
formData: { ywlxDm: '02' },
|
|
list: [],
|
|
// 发布弹窗
|
|
publishVisible: false,
|
|
publishFormData: {
|
|
bt1: '',
|
|
fwlxjh: '',
|
|
sshy: '',
|
|
ysfwDm1: '',
|
|
qwwcsj: '',
|
|
fwfw: '',
|
|
fwnr: '',
|
|
bqjh: [],
|
|
lxr: '',
|
|
lxdh: '',
|
|
email: '',
|
|
},
|
|
publishRules: {
|
|
bt1: [{ required: true, message: '必填', type: 'error' }],
|
|
fwlxjh: [{ required: true, message: '必填', type: 'error' }],
|
|
sshy: [{ required: true, message: '必填', type: 'error' }],
|
|
ysfwDm1: [{ required: true, message: '必填', type: 'error' }],
|
|
qwwcsj: [{ required: true, message: '必填', type: 'error' }],
|
|
fwfw: [{ required: true, message: '必填', type: 'error' }],
|
|
fwnr: [{ required: true, message: '必填', type: 'error' }],
|
|
lxr: [{ required: true, message: '必填', type: 'error' }],
|
|
lxdh: [{ required: true, message: '必填', type: 'error' }],
|
|
},
|
|
xqlxOptions: [],
|
|
sshyDmOptions: [],
|
|
ysfwDm1Options: [],
|
|
fwfwOptions: [],
|
|
bqOptions: [],
|
|
columns: [
|
|
{ align: 'center', colKey: 'serial-number', width: '80px', title: '序号' },
|
|
{ align: 'left', width: '120px', colKey: 'bt1', title: '标题', ellipsis: true },
|
|
{ align: 'left', width: '120px', colKey: 'fwlxjh', title: '服务类型', ellipsis: true },
|
|
{ align: 'left', width: '150px', colKey: 'sshy', title: '所属行业', ellipsis: true },
|
|
{ align: 'left', width: '120px', colKey: 'fwfw', title: '服务范围', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '150px', colKey: 'fwnr', title: '服务描述', ellipsis: true },
|
|
{ align: 'left', width: '120px', colKey: 'kzwj', title: '扩展文件', ellipsis: true },
|
|
{ align: 'left', width: '100px', colKey: 'lxr', title: '联系人', ellipsis: true },
|
|
{ align: 'left', width: '120px', colKey: 'lxdh', title: '联系电话', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '150px', colKey: 'email', title: '电子邮箱', ellipsis: true },
|
|
{ align: 'left', width: '120px', colKey: 'bqjh', title: '标签合集', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '80px', colKey: 'zt', title: '状态', ellipsis: true },
|
|
{ align: 'left', width: '120px', colKey: 'lrrq', title: '录入日期', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '100px', colKey: 'sjzt', title: '上架状态', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '100px', colKey: 'ywlxDm', title: '业务类型', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '120px', colKey: 'ysfwDm1', title: '预算范围', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '150px', colKey: 'qwwcsj', title: '期望完成时间', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '120px', colKey: 'xqjjcdDm', title: '需求紧急程度', foot: '', ellipsis: true },
|
|
{ align: 'left', width: '100px', colKey: 'cz', title: '操作', fixed: 'right', ellipsis: true },
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.onQuery();
|
|
},
|
|
computed: {
|
|
pagination() {
|
|
return {
|
|
defaultCurrent: 1,
|
|
defaultPageSize: 10,
|
|
total: 0,
|
|
showJumper: true,
|
|
onChange: (pageInfo) => {
|
|
this.pagination.defaultCurrent = pageInfo.current;
|
|
this.pagination.defaultPageSize = pageInfo.pageSize;
|
|
this.onQuery();
|
|
},
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
onReset() {
|
|
this.$message.success('重置成功');
|
|
console.log('formData', this.formData);
|
|
},
|
|
async onQuery() {
|
|
const params = this.formData;
|
|
const pageNumber = this.pagination.defaultCurrent;
|
|
const pageSize = this.pagination.defaultPageSize;
|
|
params.pageNumber = pageNumber;
|
|
params.pageSize = pageSize;
|
|
const res = await api.gxxxListByYh(params);
|
|
this.list = res.data?.records || [];
|
|
this.pagination.total = res.data?.total;
|
|
},
|
|
async changeSjzt(row) {
|
|
let sjzt = '';
|
|
if (row.sjzt == 'Y') {
|
|
sjzt = 'N';
|
|
} else {
|
|
sjzt = 'Y';
|
|
}
|
|
const params = { sjzt, gxUuid: row.gxUuid };
|
|
const res = await api.gxsj(params);
|
|
if (res) {
|
|
this.onQuery();
|
|
}
|
|
},
|
|
// 加载代码表
|
|
loadDmList() {
|
|
this.xqlxoptionsSearch();
|
|
this.sshyoptionsSearch();
|
|
this.ysfwoptionsSearch();
|
|
this.fwfwoptionsSearch();
|
|
this.bqoptionsSearch();
|
|
},
|
|
async xqlxoptionsSearch() {
|
|
try {
|
|
const res = await api.dms2mc('xqlx', {});
|
|
this.xqlxOptions = res.data || [];
|
|
} catch (error) {
|
|
this.xqlxOptions = [];
|
|
}
|
|
},
|
|
async sshyoptionsSearch() {
|
|
try {
|
|
const res = await api.dms2mc('sshy', {});
|
|
this.sshyDmOptions = res.data || [];
|
|
} catch (error) {
|
|
this.sshyDmOptions = [];
|
|
}
|
|
},
|
|
async ysfwoptionsSearch() {
|
|
try {
|
|
const res = await api.dms2mc('ysfw', {});
|
|
this.ysfwDm1Options = res.data || [];
|
|
} catch (error) {
|
|
this.ysfwDm1Options = [];
|
|
}
|
|
},
|
|
async fwfwoptionsSearch() {
|
|
try {
|
|
const res = await api.dms2mc('xzqh', {});
|
|
this.fwfwOptions = res.data || [];
|
|
} catch (error) {
|
|
this.fwfwOptions = [];
|
|
}
|
|
},
|
|
async bqoptionsSearch() {
|
|
try {
|
|
const res = await api.dms2mc('bq', {});
|
|
this.bqOptions = res.data || [];
|
|
} catch (error) {
|
|
this.bqOptions = [];
|
|
}
|
|
},
|
|
// 打开发布弹窗
|
|
handlePublish() {
|
|
this.publishVisible = true;
|
|
this.loadDmList();
|
|
},
|
|
handlePublishSubmit() {
|
|
this.$refs.publishFormRef.validate().then((result) => {
|
|
if (result === true) {
|
|
this.submitGxfb();
|
|
} else {
|
|
this.$message.warning('请填写全部必填信息');
|
|
}
|
|
});
|
|
},
|
|
async submitGxfb() {
|
|
try {
|
|
let params = {
|
|
ywlxDm: '02',
|
|
...this.publishFormData,
|
|
};
|
|
if (params.bqjh && params.bqjh.length) {
|
|
params.bqjh = params.bqjh.toString();
|
|
}
|
|
await api.gxfb(params);
|
|
this.$message.success('发布成功，请等待审核');
|
|
this.publishVisible = false;
|
|
this.resetPublishForm();
|
|
this.onQuery();
|
|
} catch (error) {
|
|
console.error('发布失败', error);
|
|
}
|
|
},
|
|
resetPublishForm() {
|
|
this.publishFormData = {
|
|
bt1: '',
|
|
fwlxjh: '',
|
|
sshy: '',
|
|
ysfwDm1: '',
|
|
qwwcsj: '',
|
|
fwfw: '',
|
|
fwnr: '',
|
|
bqjh: [],
|
|
lxr: '',
|
|
lxdh: '',
|
|
email: '',
|
|
};
|
|
},
|
|
onPublishClose() {
|
|
this.publishVisible = false;
|
|
this.resetPublishForm();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.container-body {
|
|
height: calc(100vh - 64px);
|
|
padding: 24px;
|
|
background: #ecf1f9;
|
|
}
|
|
/deep/ .t-table__header tr th{
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #3d3d3d !important;
|
|
|
|
}
|
|
/deep/ .t-table__header tr{
|
|
background-color: #f9fafb !important;
|
|
}
|
|
/deep/ .t-table__content{
|
|
border: 1px solid #bdbdbd66;
|
|
}
|
|
.table-toolbar {
|
|
margin-bottom: 16px;
|
|
}
|
|
.publish-form {
|
|
padding: 0 8px;
|
|
}
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
|
|
.t-button {
|
|
width: 200px;
|
|
}
|
|
}
|
|
</style> |