Newer
Older
HuangJiPC / src / pages / views / dataService / dataConfiguration.vue
@zhangdeliang zhangdeliang on 21 Jun 12 KB update
  1. <template>
  2. <!-- 数据服务配置管理 -->
  3. <div class="dataConfiguration">
  4. <div class="searchBoxs">
  5. <n-space>
  6. <n-input
  7. placeholder="请输入数据共享名称/数据共享编号"
  8. v-model:value="searchValue1"
  9. autosize
  10. clearable
  11. style="width: 300px"
  12. />
  13. <n-button type="primary" @click="handleClick('search')">
  14. <template #icon>
  15. <n-icon>
  16. <Search />
  17. </n-icon> </template
  18. >搜索
  19. </n-button>
  20. <n-button type="primary" @click="handleClick('add')">
  21. <template #icon>
  22. <n-icon>
  23. <Add />
  24. </n-icon> </template
  25. >新增服务项目
  26. </n-button>
  27. </n-space>
  28. </div>
  29. <!-- 表格 -->
  30. <div class="tableBox">
  31. <n-data-table
  32. :bordered="false"
  33. :max-height="700"
  34. striped
  35. :columns="columns"
  36. :data="tableData"
  37. :loading="tableLoading"
  38. :remote="true"
  39. :pagination="pagination"
  40. >
  41. </n-data-table>
  42. </div>
  43. <!-- 新增修改弹窗 -->
  44. <n-modal
  45. :title="modalTitle"
  46. :mask-closable="false"
  47. preset="dialog"
  48. :show-icon="false"
  49. :style="{ width: '600px' }"
  50. v-model:show="modalShow"
  51. >
  52. <n-form ref="formRef" :label-width="120" :rules="formInfo.rules" :model="formInfo.data" label-placement="left">
  53. <n-form-item label="数据共享名称:" path="proName">
  54. <n-input v-model:value="formInfo.data.proName" placeholder="请输入" clearable> </n-input>
  55. </n-form-item>
  56. <n-form-item label="数据共享编号:" path="proNo">
  57. <n-input v-model:value="formInfo.data.proNo" placeholder="请输入" />
  58. </n-form-item>
  59. <n-form-item label="商户ID:" path="userId">
  60. <n-input v-model:value="formInfo.data.userId" placeholder="请输入" />
  61. </n-form-item>
  62. <n-form-item label="项目状态:" path="status">
  63. <n-select v-model:value="formInfo.data.status" placeholder="请选择" :options="taskStatus" clearable>
  64. </n-select>
  65. </n-form-item>
  66. <n-form-item label="对接人员:" path="seller">
  67. <n-input v-model:value="formInfo.data.seller" placeholder="请输入" />
  68. </n-form-item>
  69. </n-form>
  70. <template #action>
  71. <n-space>
  72. <n-button @click="() => (modalShow = false)">取消</n-button>
  73. <n-button type="primary" @click="handleClick('submit')">确定 </n-button>
  74. </n-space>
  75. </template>
  76. </n-modal>
  77. <!-- 关联站点弹窗 -->
  78. <n-modal
  79. title="关联站点设置"
  80. :mask-closable="false"
  81. preset="dialog"
  82. :show-icon="false"
  83. :style="{ width: '600px' }"
  84. v-model:show="modalShow2"
  85. >
  86. <n-space vertical style="margin: 20px">
  87. <n-transfer
  88. ref="transfer"
  89. v-model:value="checkedVal"
  90. virtual-scroll
  91. :options="checkedList"
  92. source-title="未绑定站点"
  93. target-title="已绑定站点"
  94. style="width: 500px; height: 500px"
  95. filterable
  96. />
  97. </n-space>
  98. <template #action>
  99. <n-space>
  100. <n-button @click="() => (modalShow2 = false)">取消</n-button>
  101. <n-button type="primary" @click="handleClick('submit2')">确定 </n-button>
  102. </n-space>
  103. </template>
  104. </n-modal>
  105. </div>
  106. </template>
  107.  
  108. <script>
  109. import { toRefs, onMounted, reactive, h, ref, nextTick } from 'vue';
  110. import { Search, Add } from '@vicons/ionicons5';
  111. import { NButton, NImage } from 'naive-ui';
  112. import {
  113. sjfwpzSearch,
  114. sjfwpzUpdate,
  115. sjfwpzAdd,
  116. sjfwpzDelete,
  117. sjfwpzAllStation,
  118. sjfwpzUpdateStation,
  119. sjfwpzSaveStation,
  120. sjfwpzConfirmUsed,
  121. } from '@/services';
  122. import { resetForm } from '@/utils/util';
  123.  
  124. export default {
  125. name: 'dataConfiguration',
  126. components: { Search, Add, NButton },
  127. setup() {
  128. const allData = reactive({
  129. searchValue1: null,
  130. modalTitle: '新增',
  131. modalShow: false,
  132. modalShow2: false,
  133. checkedVal: [],
  134. checkedList: [],
  135. uploadList: [],
  136. taskStatus: [
  137. { value: 1, label: '启用' },
  138. { value: 2, label: '禁用' },
  139. ],
  140. formInfo: {
  141. data: {
  142. proName: '',
  143. proNo: '',
  144. seller: '',
  145. status: '',
  146. userId: '',
  147. id: '',
  148. },
  149. rules: {
  150. proName: {
  151. required: true,
  152. trigger: ['blur'],
  153. message: '请输入',
  154. },
  155. proNo: {
  156. required: true,
  157. trigger: ['blur'],
  158. message: '请输入',
  159. },
  160. userId: {
  161. required: true,
  162. trigger: ['blur'],
  163. message: '请输入',
  164. },
  165. },
  166. },
  167. detailStation: {},
  168. tableLoading: false,
  169. tableData: [],
  170. columns: [
  171. {
  172. title: '序号',
  173. align: 'center',
  174. width: '80',
  175. render(row, index) {
  176. return (paginationReactive.page - 1) * paginationReactive.pageSize + index + 1;
  177. },
  178. },
  179. { title: '数据共享名称', align: 'center', key: 'proName' },
  180. { title: '数据共享编号', align: 'center', key: 'proNo' },
  181. { title: '商户ID', align: 'center', key: 'userId' },
  182. { title: '对接人员', align: 'center', key: 'seller' },
  183. {
  184. title: '状态',
  185. align: 'center',
  186. key: 'status',
  187. render(row) {
  188. return row.status == '1' ? '启用' : '禁用';
  189. },
  190. },
  191. { title: '使用时间', align: 'center', key: 'useTime' },
  192. { title: '创建时间', align: 'center', key: 'createTime' },
  193. {
  194. title: '操作',
  195. key: 'actions',
  196. width: '280',
  197. align: 'center',
  198. render(row) {
  199. const btn = allData.actionColumn.map((item, index) => {
  200. return h(
  201. NButton,
  202. {
  203. text: true,
  204. size: item.size,
  205. style: {
  206. margin: '10px',
  207. },
  208. type: item.btnType,
  209. onClick: () => handleClick(item.type, row),
  210. },
  211. { default: () => item.default }
  212. );
  213. });
  214. return btn;
  215. },
  216. },
  217. ],
  218. actionColumn: [
  219. {
  220. size: 'small',
  221. btnType: 'primary',
  222. type: 'sure',
  223. default: '确认使用',
  224. },
  225. {
  226. size: 'small',
  227. btnType: 'primary',
  228. type: 'relation',
  229. default: '关联站点',
  230. },
  231. {
  232. size: 'small',
  233. btnType: 'primary',
  234. type: 'edit',
  235. default: '修改',
  236. },
  237. {
  238. size: 'small',
  239. btnType: 'error',
  240. type: 'delete',
  241. default: '删除',
  242. },
  243. ],
  244. });
  245. //分页
  246. const paginationReactive = reactive({
  247. page: 1,
  248. pageSize: 10,
  249. showSizePicker: true,
  250. pageSizes: [10, 20, 50],
  251. showQuickJumper: true,
  252. pageCount: 0,
  253. itemCount: 0,
  254. prefix: () => {
  255. return '共 ' + paginationReactive.itemCount + ' 项';
  256. },
  257. onChange: (page) => {
  258. paginationReactive.page = page;
  259. getTableData();
  260. },
  261. onPageSizeChange: (pageSize) => {
  262. paginationReactive.pageSize = pageSize;
  263. paginationReactive.page = 1;
  264. getTableData();
  265. },
  266. });
  267. const getTableData = async () => {
  268. allData.tableLoading = true;
  269. let pramas = {
  270. current: paginationReactive.page,
  271. size: paginationReactive.pageSize,
  272. data: {
  273. condition: allData.searchValue1,
  274. },
  275. };
  276. let res = await sjfwpzSearch(pramas);
  277. if (res && res.code == 200) {
  278. let datas = res.data;
  279. allData.tableData = datas.list;
  280. paginationReactive.pageCount = datas.pages;
  281. paginationReactive.itemCount = datas.total;
  282. }
  283. allData.tableLoading = false;
  284. };
  285. const formRef = ref(null);
  286. // 点击事件
  287. const handleClick = async (type, row) => {
  288. switch (type) {
  289. case 'search':
  290. getTableData();
  291. break;
  292. case 'add':
  293. allData.modalTitle = '新增';
  294. resetForm(allData.formInfo.data);
  295. allData.modalShow = true;
  296. break;
  297. case 'edit':
  298. allData.modalTitle = '修改';
  299. allData.formInfo.data = { ...row };
  300. allData.modalShow = true;
  301. break;
  302. case 'sure':
  303. // 确认使用
  304. $dialog.info({
  305. title: '提示',
  306. content: `确定使用该数据吗?`,
  307. positiveText: '确定',
  308. negativeText: '取消',
  309. onPositiveClick: async () => {
  310. let res = await sjfwpzConfirmUsed(`?id=${row.id}`);
  311. if (res && res.code == 200) {
  312. getTableData();
  313. }
  314. },
  315. });
  316. break;
  317. case 'relation':
  318. // 关联站点
  319. getAllReadyStation(row);
  320. allData.detailStation = { ...row };
  321. allData.modalShow2 = true;
  322. break;
  323. case 'submit2':
  324. // 关联站点 数据提交
  325. updateStation(allData.detailStation);
  326. break;
  327. case 'submit':
  328. formRef.value.validate((errors) => {
  329. if (!errors) {
  330. submitData();
  331. } else {
  332. $message.error('验证失败,请检查必填项');
  333. }
  334. });
  335. break;
  336. case 'delete':
  337. $dialog.info({
  338. title: '提示',
  339. content: `确定删除该数据吗?`,
  340. positiveText: '确定',
  341. negativeText: '取消',
  342. onPositiveClick: () => {
  343. dataDel(row.id);
  344. },
  345. });
  346. break;
  347. }
  348. };
  349. // 删除数据
  350. async function dataDel(id) {
  351. let res = await sjfwpzDelete('?id=' + id);
  352. if (res && res.code === 200) {
  353. $message.success('删除成功');
  354. getTableData();
  355. }
  356. }
  357. // 提交数据
  358. async function submitData() {
  359. let params = { ...allData.formInfo.data };
  360. if (allData.modalTitle == '新增') {
  361. if (params.id) delete params.id;
  362. let res = await sjfwpzAdd(params);
  363. if (res && res.code == 200) {
  364. $message.success('操作成功');
  365. getTableData();
  366. allData.modalShow = false;
  367. }
  368. } else {
  369. let res = await sjfwpzUpdate(params);
  370. if (res && res.code == 200) {
  371. $message.success('操作成功');
  372. getTableData();
  373. allData.modalShow = false;
  374. } else {
  375. $message.error(res.msg);
  376. }
  377. }
  378. }
  379. // 关联站点提交
  380. async function updateStation(row) {
  381. let params = {
  382. proName: row.proName,
  383. proNo: row.proNo,
  384. stCodeList: allData.checkedVal,
  385. };
  386. let res = await sjfwpzSaveStation(params);
  387. if (res && res.code == 200) {
  388. getTableData();
  389. allData.modalShow2 = false;
  390. }
  391. }
  392. // 获取全部站点
  393. async function getAllReadyStation(row) {
  394. allData.checkedList = [];
  395. allData.checkedVal = [];
  396. let params = { current: 1, size: 1000, data: {} };
  397. let res = await sjfwpzAllStation(params);
  398. if (res && res.code == 200) {
  399. let datas = res.data.list;
  400. datas.map((item) => {
  401. allData.checkedList.push({
  402. value: item.stCode,
  403. label: item.stName,
  404. });
  405. });
  406. }
  407. getReadyStation(row);
  408. }
  409. // 获取已关联站点
  410. async function getReadyStation(row) {
  411. let params = { current: 1, size: 1000, data: { proNo: row.proNo } };
  412. let res = await sjfwpzUpdateStation(params);
  413. if (res && res.code == 200) {
  414. allData.checkedVal = res.data.list;
  415. }
  416. }
  417. onMounted(() => {
  418. getTableData();
  419. });
  420. return {
  421. ...toRefs(allData),
  422. pagination: paginationReactive,
  423. handleClick,
  424. getTableData,
  425. formRef,
  426. };
  427. },
  428. };
  429. </script>
  430.  
  431. <style lang="less">
  432. .dataConfiguration {
  433. width: 100%;
  434. .searchBoxs {
  435. margin: 10px;
  436. }
  437. }
  438. </style>