index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526
  1. <script>
  2. // import LabelTree from "./lable-tree.vue";
  3. // import TemplateTable from "./template-table.vue";
  4. import { list, item, role, auth } from "@/api/system/table-template";
  5. import { listRole } from "@/api/system/role";
  6. export default {
  7. name: "TableTemplate",
  8. components: {
  9. // LabelTree,
  10. // TemplateTable,
  11. },
  12. data() {
  13. return {
  14. loading: false,
  15. // 详情弹窗标题
  16. itemDialogTitle: "",
  17. // 详情弹窗显隐
  18. itemDialogVisible: false,
  19. // 授权弹窗显隐
  20. authDialogVisible: false,
  21. // 授权查询参数
  22. authQueryParams: { id: "", pageNum: 1, pageSize: 10 },
  23. // 角色列表
  24. roleList: [],
  25. // 角色总数
  26. roleTotal: 0,
  27. // 已授权角色列表,
  28. authRoleList: [],
  29. form1: { input: "", select: "" },
  30. form2: { input: "", select: "" },
  31. page: { pageNum: 1, pageSize: 25 },
  32. total: 0,
  33. options: [],
  34. tableData: [],
  35. selectionTableData: [],
  36. columns: [
  37. {
  38. type: "text",
  39. prop: "templateCode",
  40. label: "模板编码",
  41. showOverflowTooltip: true,
  42. },
  43. {
  44. type: "text",
  45. prop: "templateName",
  46. label: "模板名称",
  47. showOverflowTooltip: true,
  48. },
  49. {
  50. type: "text",
  51. prop: "desc",
  52. label: "描述",
  53. showOverflowTooltip: true,
  54. },
  55. {
  56. type: "text",
  57. prop: "remark",
  58. label: "备注",
  59. showOverflowTooltip: true,
  60. },
  61. {
  62. type: "select",
  63. prop: "status",
  64. label: "启用状态",
  65. showOverflowTooltip: true,
  66. },
  67. {
  68. type: "text",
  69. prop: "createBy",
  70. label: "创建者",
  71. showOverflowTooltip: true,
  72. },
  73. {
  74. type: "text",
  75. prop: "createTime",
  76. label: "创建时间",
  77. showOverflowTooltip: true,
  78. },
  79. {
  80. type: "text",
  81. prop: "updateBy",
  82. label: "更新者",
  83. showOverflowTooltip: true,
  84. },
  85. {
  86. type: "text",
  87. prop: "updateTime",
  88. label: "更新时间",
  89. showOverflowTooltip: true,
  90. },
  91. ],
  92. };
  93. },
  94. methods: {
  95. // 搜索模板列表
  96. fetchList() {
  97. list(this.from, this.page).then((res) => {
  98. let { total, rows } = res;
  99. this.tableData = rows;
  100. this.total = total;
  101. });
  102. },
  103. // 查询模板列表
  104. onSearch() {
  105. this.pageNum = 1;
  106. this.fetchList();
  107. },
  108. //
  109. onSizeChnage() {
  110. this.pageNum = 1;
  111. this.fetchList();
  112. },
  113. //
  114. onCurrentChange() {
  115. this.fetchList();
  116. },
  117. // 选择待复制模板
  118. onSelectionChange(value) {
  119. this.selectionTableData = value;
  120. },
  121. // 打开授权弹窗
  122. onAuthTemplate(props) {
  123. let { id } = props;
  124. this.authDialogVisible = true;
  125. this.authQueryParams.id = id;
  126. listRole(this.authQueryParams).then((res) => {
  127. let { rows, total } = res;
  128. this.roleList = rows.map((item) => ({
  129. key: item.roleId,
  130. label: item.roleName,
  131. }));
  132. this.roleTotal = total;
  133. });
  134. role(id).then((res) => {
  135. let { data } = res;
  136. this.authRoleList = data.map((item) => item.roleId);
  137. });
  138. },
  139. // 打开编辑弹窗
  140. onEditTemplate(props) {
  141. this.itemDialogTitle = "编辑";
  142. this.itemDialogVisible = true;
  143. let { id } = props;
  144. item(id).then((res) => {
  145. let { data } = res;
  146. this.form2 = data;
  147. this.form2.sysTemplateItemList = data.sysTemplateItemList.map(
  148. (item) => ({
  149. ...item,
  150. isEdit: item.isEdit === "1" ? true : false,
  151. isShow: item.isShow === "1" ? true : false,
  152. isRequired: item.isRequired === "1" ? true : false,
  153. })
  154. );
  155. });
  156. },
  157. // 提交授权
  158. onSubmitAuth() {
  159. let templateId = this.authQueryParams.id;
  160. let roleIdList = this.authRoleList;
  161. auth({ templateId, roleIdList }).then((res) => {
  162. let { code } = res;
  163. if (code == 200) {
  164. this.authDialogVisible = false;
  165. this.$message.success("授权成功");
  166. }
  167. });
  168. },
  169. // 复制编辑模板
  170. onCopyTemplate(props) {
  171. this.itemDialogTitle = "复制";
  172. this.itemDialogVisible = true;
  173. let { id } = props;
  174. item(id).then((res) => {
  175. let { data } = res;
  176. this.form2 = data;
  177. this.form2.sysTemplateItemList = data.sysTemplateItemList.map(
  178. (item) => ({
  179. ...item,
  180. isEdit: item.isEdit === "1" ? true : false,
  181. isShow: item.isShow === "1" ? true : false,
  182. isRequired: item.isRequired === "1" ? true : false,
  183. })
  184. );
  185. });
  186. },
  187. // 删除模板row
  188. onRemoveTemplateRow(props) {
  189. let { code } = props;
  190. this.form2.sysTemplateItemList = this.form2.sysTemplateItemList.filter(
  191. (item) => item.code !== code
  192. );
  193. },
  194. // 移动模板row
  195. onMoveTemplateRow(direction, index1) {
  196. let index2 = 0;
  197. let swapArr = (arr, index1, index2) => {
  198. arr[index1] = arr.splice(index2, 1, arr[index1])[0];
  199. return arr;
  200. };
  201. index2 = direction === "top" ? index1 - 1 : index1 + 1;
  202. this.form2.sysTemplateItemList = swapArr(
  203. this.form2.sysTemplateItemList,
  204. index1,
  205. index2
  206. );
  207. },
  208. },
  209. created() {
  210. this.fetchList();
  211. },
  212. };
  213. </script>
  214. <template>
  215. <el-container class="container table-template">
  216. <el-container class="table-template-table">
  217. <el-header>
  218. <div class="table-header-top">
  219. <span>查询条件</span>
  220. <div>
  221. <el-select v-model="form1.select" size="small" placeholder="请选择">
  222. <el-option
  223. v-for="item in options"
  224. :key="item.value"
  225. :label="item.label"
  226. :value="item.value"
  227. >
  228. </el-option>
  229. </el-select>
  230. <el-input
  231. v-model="form1.input"
  232. size="small"
  233. placeholder="请输入内容"
  234. :readonly="loading"
  235. @change="onSearch"
  236. >
  237. <template #suffix>
  238. <i v-show="loading" class="el-input__icon el-icon-loading"></i>
  239. <i v-show="!loading" class="el-input__icon el-icon-search"></i>
  240. </template>
  241. </el-input>
  242. <el-button size="small">搜索</el-button>
  243. <el-button size="small">重置</el-button>
  244. </div>
  245. </div>
  246. <div class="table-header-bottom">
  247. <el-button size="small">新增</el-button>
  248. <el-button
  249. size="small"
  250. :disabled="selectionTableData.length !== 1"
  251. @click="onCopyTemplate(selectionTableData[0])"
  252. >复制</el-button
  253. >
  254. <el-button size="small">导入</el-button>
  255. <el-button size="small">导出</el-button>
  256. </div>
  257. </el-header>
  258. <el-main>
  259. <el-table :data="tableData" @selection-change="onSelectionChange">
  260. <el-table-column
  261. type="selection"
  262. width="55"
  263. fixed="left"
  264. align="center"
  265. show-overflow-tooltip
  266. >
  267. </el-table-column>
  268. <el-table-column
  269. v-for="column in columns"
  270. :key="column.prop"
  271. :prop="column.prop"
  272. :label="column.label"
  273. :show-overflow-tooltip="column.showOverflowTooltip"
  274. >
  275. </el-table-column>
  276. <el-table-column fixed="right" label="操作" width="225">
  277. <template slot-scope="scope">
  278. <el-button
  279. @click.native.prevent="onAuthTemplate(scope.row)"
  280. size="small"
  281. >
  282. 授权
  283. </el-button>
  284. <el-button
  285. @click.native.prevent="onEditTemplate(scope.row)"
  286. size="small"
  287. >
  288. 修改
  289. </el-button>
  290. <el-button
  291. @click.native.prevent="deleteRow(scope.$index, tableData)"
  292. size="small"
  293. >
  294. 删除
  295. </el-button>
  296. </template>
  297. </el-table-column>
  298. </el-table>
  299. </el-main>
  300. <el-footer>
  301. <el-pagination
  302. @size-change="onSizeChnage"
  303. @current-change="onCurrentChange"
  304. :current-page="page.pageNum"
  305. :page-sizes="[25, 50, 100]"
  306. :page-size="page.pageSize"
  307. layout="total, prev, pager, next, sizes, jumper"
  308. :total="total"
  309. >
  310. </el-pagination>
  311. </el-footer>
  312. </el-container>
  313. <el-dialog
  314. width="75%"
  315. destroy-on-close
  316. :title="itemDialogTitle"
  317. :visible.sync="itemDialogVisible"
  318. >
  319. <el-row :gutter="20">
  320. <el-form size="mini" :model="form2" label-position="top">
  321. <el-col v-for="column in columns" :key="column.prop" :span="6">
  322. <el-form-item :label="column.label">
  323. <el-input
  324. v-if="column.type === 'text'"
  325. v-model="form2[column.prop]"
  326. ></el-input>
  327. <el-select
  328. v-if="column.type === 'select'"
  329. v-model="form2[column.prop]"
  330. >
  331. <el-option label="区域一" value="shanghai"></el-option>
  332. <el-option label="区域二" value="beijing"></el-option>
  333. </el-select>
  334. </el-form-item>
  335. </el-col>
  336. <el-col :span="24">
  337. <el-form-item label="模板配置">
  338. <el-table :data="form2.sysTemplateItemList">
  339. <el-table-column type="index" width="50"> </el-table-column>
  340. <el-table-column prop="code" label="字段编码" width="200">
  341. <template slot-scope="scope">
  342. <el-input v-model="scope.row.code"></el-input>
  343. </template>
  344. </el-table-column>
  345. <el-table-column prop="name" label="字段名称" width="200">
  346. <template slot-scope="scope">
  347. <el-input v-model="scope.row.name"></el-input>
  348. </template>
  349. </el-table-column>
  350. <el-table-column prop="isEdit" label="是否编辑">
  351. <template slot-scope="scope">
  352. <el-switch v-model="scope.row.isEdit"> </el-switch>
  353. </template>
  354. </el-table-column>
  355. <el-table-column prop="isShow" label="是否显示">
  356. <template slot-scope="scope">
  357. <el-switch v-model="scope.row.isShow"> </el-switch>
  358. </template>
  359. </el-table-column>
  360. <el-table-column prop="isRequired" label="是否必填">
  361. <template slot-scope="scope">
  362. <el-switch v-model="scope.row.isRequired"> </el-switch>
  363. </template>
  364. </el-table-column>
  365. <el-table-column
  366. prop="conditionType"
  367. label="字段类型"
  368. width="200"
  369. >
  370. <template slot-scope="scope">
  371. <el-input v-model="scope.row.conditionType"></el-input>
  372. </template>
  373. </el-table-column>
  374. <el-table-column prop="dictId" label="字典ID" width="200">
  375. <template slot-scope="scope">
  376. <el-input v-model="scope.row.dictId"></el-input>
  377. </template>
  378. </el-table-column>
  379. <el-table-column
  380. prop="textAttribute"
  381. label="文本类型"
  382. width="200"
  383. >
  384. <template slot-scope="scope">
  385. <el-input v-model="scope.row.textAttribute"></el-input>
  386. </template>
  387. </el-table-column>
  388. <el-table-column prop="checkRule" label="校验规则" width="200">
  389. <template slot-scope="scope">
  390. <el-input v-model="scope.row.checkRule"></el-input>
  391. </template>
  392. </el-table-column>
  393. <el-table-column fixed="right" label="操作" width="150">
  394. <template slot-scope="scope">
  395. <el-button
  396. :disabled="scope.$index === 0"
  397. @click.native.prevent="
  398. onMoveTemplateRow('top', scope.$index)
  399. "
  400. icon="el-icon-top"
  401. circle
  402. >
  403. </el-button>
  404. <el-button
  405. :disabled="
  406. scope.$index === form2.sysTemplateItemList.length - 1
  407. "
  408. @click.native.prevent="
  409. onMoveTemplateRow('bottom', scope.$index)
  410. "
  411. icon="el-icon-bottom"
  412. circle
  413. >
  414. </el-button>
  415. <el-button
  416. @click.native.prevent="onRemoveTemplateRow(scope.row)"
  417. icon="el-icon-remove"
  418. circle
  419. >
  420. </el-button>
  421. </template>
  422. </el-table-column>
  423. </el-table>
  424. </el-form-item>
  425. </el-col>
  426. <!-- <el-col :span="12">
  427. <el-form-item label="活动区域">
  428. <el-select v-model="form2.region" placeholder="请选择活动区域">
  429. <el-option label="区域一" value="shanghai"></el-option>
  430. <el-option label="区域二" value="beijing"></el-option>
  431. </el-select>
  432. </el-form-item>
  433. </el-col> -->
  434. </el-form>
  435. </el-row>
  436. <div slot="footer">
  437. <el-button @click="itemDialogVisible = false">取 消</el-button>
  438. <el-button type="primary" @click="itemDialogVisible = false"
  439. >确 定</el-button
  440. >
  441. </div>
  442. </el-dialog>
  443. <el-dialog
  444. width="fit-content"
  445. destroy-on-close
  446. title="君权孙授"
  447. :visible.sync="authDialogVisible"
  448. >
  449. <el-transfer
  450. v-model="authRoleList"
  451. :data="roleList"
  452. :titles="['未授权', '已授权']"
  453. >
  454. <template #left-footer>
  455. <el-pagination :total="roleTotal" layout="prev, pager, next">
  456. </el-pagination>
  457. </template>
  458. </el-transfer>
  459. <div slot="footer">
  460. <el-button @click="authDialogVisible = false">取 消</el-button>
  461. <el-button type="primary" @click="onSubmitAuth">确 定 </el-button>
  462. </div>
  463. </el-dialog>
  464. </el-container>
  465. </template>
  466. <style scoped>
  467. .container {
  468. --size: 12px;
  469. --margin: var(--size);
  470. --padding: var(--size);
  471. }
  472. .container {
  473. width: calc(100% - calc(var(--size) * 2));
  474. /* height: calc(100vh - calc(var(--size) * 2)); */
  475. margin: var(--padding);
  476. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  477. }
  478. .container .el-aside {
  479. margin: 0;
  480. padding: var(--padding);
  481. background-color: rgba(255, 255, 255, 1);
  482. border-right: 1px solid #dcdfe6;
  483. overflow: hidden;
  484. }
  485. .table-template-table .el-header {
  486. height: fit-content !important;
  487. padding-top: var(--padding);
  488. padding-bottom: var(--padding);
  489. border-bottom: 1px solid #dcdfe6;
  490. }
  491. .table-template-table .table-header-top {
  492. margin-bottom: var(--margin);
  493. display: flex;
  494. justify-content: space-between;
  495. align-items: center;
  496. }
  497. .table-template-table .table-header-top .el-select {
  498. width: 150px;
  499. margin-right: var(--margin);
  500. }
  501. .table-template-table .table-header-top .el-input {
  502. width: 250px;
  503. margin-right: var(--margin);
  504. }
  505. .table-template-table .el-main {
  506. padding: 0;
  507. }
  508. .table-template-table .el-main .el-table {
  509. width: 100%;
  510. height: 100%;
  511. }
  512. .table-template-table .el-footer {
  513. display: flex;
  514. justify-content: end;
  515. align-items: center;
  516. }
  517. .el-transfer .el-transfer-panel__footer {
  518. display: flex;
  519. align-items: center;
  520. }
  521. </style>