- <template>
- <!-- 数据服务配置管理 -->
- <div class="dataConfiguration">
- <div class="searchBoxs">
- <n-space>
- <n-input
- placeholder="请输入数据共享名称/数据共享编号"
- v-model:value="searchValue1"
- autosize
- clearable
- style="width: 300px"
- />
- <n-button type="primary" @click="handleClick('search')">
- <template #icon>
- <n-icon>
- <Search />
- </n-icon> </template
- >搜索
- </n-button>
- <n-button type="primary" @click="handleClick('add')">
- <template #icon>
- <n-icon>
- <Add />
- </n-icon> </template
- >新增服务项目
- </n-button>
- </n-space>
- </div>
- <!-- 表格 -->
- <div class="tableBox">
- <n-data-table
- :bordered="false"
- :max-height="700"
- striped
- :columns="columns"
- :data="tableData"
- :loading="tableLoading"
- :remote="true"
- :pagination="pagination"
- >
- </n-data-table>
- </div>
- <!-- 新增修改弹窗 -->
- <n-modal
- :title="modalTitle"
- :mask-closable="false"
- preset="dialog"
- :show-icon="false"
- :style="{ width: '600px' }"
- v-model:show="modalShow"
- >
- <n-form ref="formRef" :label-width="120" :rules="formInfo.rules" :model="formInfo.data" label-placement="left">
- <n-form-item label="数据共享名称:" path="proName">
- <n-input v-model:value="formInfo.data.proName" placeholder="请输入" clearable> </n-input>
- </n-form-item>
- <n-form-item label="数据共享编号:" path="proNo">
- <n-input v-model:value="formInfo.data.proNo" placeholder="请输入" />
- </n-form-item>
- <n-form-item label="商户ID:" path="userId">
- <n-input v-model:value="formInfo.data.userId" placeholder="请输入" />
- </n-form-item>
- <n-form-item label="项目状态:" path="status">
- <n-select v-model:value="formInfo.data.status" placeholder="请选择" :options="taskStatus" clearable>
- </n-select>
- </n-form-item>
- <n-form-item label="对接人员:" path="seller">
- <n-input v-model:value="formInfo.data.seller" placeholder="请输入" />
- </n-form-item>
- </n-form>
- <template #action>
- <n-space>
- <n-button @click="() => (modalShow = false)">取消</n-button>
- <n-button type="primary" @click="handleClick('submit')">确定 </n-button>
- </n-space>
- </template>
- </n-modal>
- <!-- 关联站点弹窗 -->
- <n-modal
- title="关联站点设置"
- :mask-closable="false"
- preset="dialog"
- :show-icon="false"
- :style="{ width: '600px' }"
- v-model:show="modalShow2"
- >
- <n-space vertical style="margin: 20px">
- <n-transfer
- ref="transfer"
- v-model:value="checkedVal"
- virtual-scroll
- :options="checkedList"
- source-title="未绑定站点"
- target-title="已绑定站点"
- style="width: 500px; height: 500px"
- filterable
- />
- </n-space>
- <template #action>
- <n-space>
- <n-button @click="() => (modalShow2 = false)">取消</n-button>
- <n-button type="primary" @click="handleClick('submit2')">确定 </n-button>
- </n-space>
- </template>
- </n-modal>
- </div>
- </template>
-
- <script>
- import { toRefs, onMounted, reactive, h, ref, nextTick } from 'vue';
- import { Search, Add } from '@vicons/ionicons5';
- import { NButton, NImage } from 'naive-ui';
- import {
- sjfwpzSearch,
- sjfwpzUpdate,
- sjfwpzAdd,
- sjfwpzDelete,
- sjfwpzAllStation,
- sjfwpzUpdateStation,
- sjfwpzSaveStation,
- sjfwpzConfirmUsed,
- } from '@/services';
- import { resetForm } from '@/utils/util';
-
- export default {
- name: 'dataConfiguration',
- components: { Search, Add, NButton },
- setup() {
- const allData = reactive({
- searchValue1: null,
- modalTitle: '新增',
- modalShow: false,
- modalShow2: false,
- checkedVal: [],
- checkedList: [],
- uploadList: [],
- taskStatus: [
- { value: 1, label: '启用' },
- { value: 2, label: '禁用' },
- ],
- formInfo: {
- data: {
- proName: '',
- proNo: '',
- seller: '',
- status: '',
- userId: '',
- id: '',
- },
- rules: {
- proName: {
- required: true,
- trigger: ['blur'],
- message: '请输入',
- },
- proNo: {
- required: true,
- trigger: ['blur'],
- message: '请输入',
- },
- userId: {
- required: true,
- trigger: ['blur'],
- message: '请输入',
- },
- },
- },
- detailStation: {},
- tableLoading: false,
- tableData: [],
- columns: [
- {
- title: '序号',
- align: 'center',
- width: '80',
- render(row, index) {
- return (paginationReactive.page - 1) * paginationReactive.pageSize + index + 1;
- },
- },
- { title: '数据共享名称', align: 'center', key: 'proName' },
- { title: '数据共享编号', align: 'center', key: 'proNo' },
- { title: '商户ID', align: 'center', key: 'userId' },
- { title: '对接人员', align: 'center', key: 'seller' },
- {
- title: '状态',
- align: 'center',
- key: 'status',
- render(row) {
- return row.status == '1' ? '启用' : '禁用';
- },
- },
- { title: '使用时间', align: 'center', key: 'useTime' },
- { title: '创建时间', align: 'center', key: 'createTime' },
- {
- title: '操作',
- key: 'actions',
- width: '280',
- align: 'center',
- render(row) {
- const btn = allData.actionColumn.map((item, index) => {
- return h(
- NButton,
- {
- text: true,
- size: item.size,
- style: {
- margin: '10px',
- },
- type: item.btnType,
- onClick: () => handleClick(item.type, row),
- },
- { default: () => item.default }
- );
- });
- return btn;
- },
- },
- ],
- actionColumn: [
- {
- size: 'small',
- btnType: 'primary',
- type: 'sure',
- default: '确认使用',
- },
- {
- size: 'small',
- btnType: 'primary',
- type: 'relation',
- default: '关联站点',
- },
- {
- size: 'small',
- btnType: 'primary',
- type: 'edit',
- default: '修改',
- },
- {
- size: 'small',
- btnType: 'error',
- type: 'delete',
- default: '删除',
- },
- ],
- });
- //分页
- const paginationReactive = reactive({
- page: 1,
- pageSize: 10,
- showSizePicker: true,
- pageSizes: [10, 20, 50],
- showQuickJumper: true,
- pageCount: 0,
- itemCount: 0,
- prefix: () => {
- return '共 ' + paginationReactive.itemCount + ' 项';
- },
- onChange: (page) => {
- paginationReactive.page = page;
- getTableData();
- },
- onPageSizeChange: (pageSize) => {
- paginationReactive.pageSize = pageSize;
- paginationReactive.page = 1;
- getTableData();
- },
- });
- const getTableData = async () => {
- allData.tableLoading = true;
- let pramas = {
- current: paginationReactive.page,
- size: paginationReactive.pageSize,
- data: {
- condition: allData.searchValue1,
- },
- };
- let res = await sjfwpzSearch(pramas);
- if (res && res.code == 200) {
- let datas = res.data;
- allData.tableData = datas.list;
- paginationReactive.pageCount = datas.pages;
- paginationReactive.itemCount = datas.total;
- }
- allData.tableLoading = false;
- };
- const formRef = ref(null);
- // 点击事件
- const handleClick = async (type, row) => {
- switch (type) {
- case 'search':
- getTableData();
- break;
- case 'add':
- allData.modalTitle = '新增';
- resetForm(allData.formInfo.data);
- allData.modalShow = true;
- break;
- case 'edit':
- allData.modalTitle = '修改';
- allData.formInfo.data = { ...row };
- allData.modalShow = true;
- break;
- case 'sure':
- // 确认使用
- $dialog.info({
- title: '提示',
- content: `确定使用该数据吗?`,
- positiveText: '确定',
- negativeText: '取消',
- onPositiveClick: async () => {
- let res = await sjfwpzConfirmUsed(`?id=${row.id}`);
- if (res && res.code == 200) {
- getTableData();
- }
- },
- });
- break;
- case 'relation':
- // 关联站点
- getAllReadyStation(row);
- allData.detailStation = { ...row };
- allData.modalShow2 = true;
- break;
- case 'submit2':
- // 关联站点 数据提交
- updateStation(allData.detailStation);
- break;
- case 'submit':
- formRef.value.validate((errors) => {
- if (!errors) {
- submitData();
- } else {
- $message.error('验证失败,请检查必填项');
- }
- });
- break;
- case 'delete':
- $dialog.info({
- title: '提示',
- content: `确定删除该数据吗?`,
- positiveText: '确定',
- negativeText: '取消',
- onPositiveClick: () => {
- dataDel(row.id);
- },
- });
- break;
- }
- };
- // 删除数据
- async function dataDel(id) {
- let res = await sjfwpzDelete('?id=' + id);
- if (res && res.code === 200) {
- $message.success('删除成功');
- getTableData();
- }
- }
- // 提交数据
- async function submitData() {
- let params = { ...allData.formInfo.data };
- if (allData.modalTitle == '新增') {
- if (params.id) delete params.id;
- let res = await sjfwpzAdd(params);
- if (res && res.code == 200) {
- $message.success('操作成功');
- getTableData();
- allData.modalShow = false;
- }
- } else {
- let res = await sjfwpzUpdate(params);
- if (res && res.code == 200) {
- $message.success('操作成功');
- getTableData();
- allData.modalShow = false;
- } else {
- $message.error(res.msg);
- }
- }
- }
- // 关联站点提交
- async function updateStation(row) {
- let params = {
- proName: row.proName,
- proNo: row.proNo,
- stCodeList: allData.checkedVal,
- };
- let res = await sjfwpzSaveStation(params);
- if (res && res.code == 200) {
- getTableData();
- allData.modalShow2 = false;
- }
- }
- // 获取全部站点
- async function getAllReadyStation(row) {
- allData.checkedList = [];
- allData.checkedVal = [];
- let params = { current: 1, size: 1000, data: {} };
- let res = await sjfwpzAllStation(params);
- if (res && res.code == 200) {
- let datas = res.data.list;
- datas.map((item) => {
- allData.checkedList.push({
- value: item.stCode,
- label: item.stName,
- });
- });
- }
- getReadyStation(row);
- }
- // 获取已关联站点
- async function getReadyStation(row) {
- let params = { current: 1, size: 1000, data: { proNo: row.proNo } };
- let res = await sjfwpzUpdateStation(params);
- if (res && res.code == 200) {
- allData.checkedVal = res.data.list;
- }
- }
- onMounted(() => {
- getTableData();
- });
- return {
- ...toRefs(allData),
- pagination: paginationReactive,
- handleClick,
- getTableData,
- formRef,
- };
- },
- };
- </script>
-
- <style lang="less">
- .dataConfiguration {
- width: 100%;
- .searchBoxs {
- margin: 10px;
- }
- }
- </style>