dataDictionary.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. <template>
  2. <a-card :bordered="false" :style="{height:windowHeight+'px'}">
  3. <a-row :gutter="24">
  4. <!-- 左侧字典列表 -->
  5. <a-col :span="6">
  6. <a-row :gutter="24">
  7. <!-- <a-button style="margin-right: 10px;" type="primary" icon="plus" @click="addCode">添加字典</a-button> -->
  8. <a-button id="dataDictionary-operate-btn" style="margin-right: 10px;" type="primary" icon="plus" @click="editCode">编辑字典</a-button>
  9. <!-- <a-select style="width: 110px" placeholder="更多操作" allowClear >
  10. <a-select-option @click="editCode" value="编辑字典">编辑字典</a-select-option>
  11. <a-select-option @click="delectCode" value="删除字典">删除字典</a-select-option>
  12. </a-select> -->
  13. </a-row>
  14. <a-row :gutter="24" class="textCount">
  15. <a-icon type="info-circle" style="color: #1890FF;margin-right: 10px;" />
  16. <span>当前选择:<span style="color: #40a9ff;font-weight: 600;">{{ selectedMenu }}</span><span v-if="selectedKey.length" class="imgSize" @click="cancelSel">取消选择</span></span>
  17. </a-row>
  18. <a-row :gutter="24" >
  19. <a-input-search id="dataDictionary-search" v-model="code" placeholder="输入编码类别/名称 搜索字典" style="width: 100%" @search="getCodeList" />
  20. </a-row>
  21. <a-row :gutter="24" >
  22. <a-menu class="menu-box" style="border-right: 0;max-height: 660px;overflow: auto;" v-model="selectedKey" >
  23. <a-menu-item id="dataDictionary-menu" style="margin-bottom: 0px;height: 30px; line-height: 30px;" v-for="(item,index) in codeList" :key="index" :value="item">{{ item.name }}</a-menu-item>
  24. </a-menu>
  25. <span v-if="noData" style="line-height: 50px; font-weight: 600;">暂无数据</span>
  26. </a-row>
  27. </a-col>
  28. <!-- 右侧数据列表 -->
  29. <a-col :span="18" >
  30. <div style="padding-left: 20px;">
  31. <div class="table-page-search-wrapper">
  32. <a-form layout="inline" id="dataDictionary-form">
  33. <a-row :gutter="48">
  34. <a-col :md="6" :sm="24">
  35. <a-form-item label="数据名称">
  36. <a-input id="dataDictionary-dispName" allowClear v-model.trim="queryParam.dispName" placeholder="请输入数据名称"/>
  37. </a-form-item>
  38. </a-col>
  39. <a-col :md="6" :sm="24">
  40. <a-form-item label="状态">
  41. <a-select
  42. allowClear
  43. id="dataDictionary-isEnable"
  44. v-model="queryParam.isEnable"
  45. placeholder="请选择"
  46. >
  47. <a-select-option :value="1" id="dataDictionary-isEnable1">
  48. </a-select-option>
  49. <a-select-option :value="0" id="dataDictionary-isEnable0">
  50. </a-select-option>
  51. </a-select>
  52. <!-- <v-select code="FLAG" v-model="queryParam.enableFlag" allowClear placeholder="是否启用"></v-select> -->
  53. </a-form-item>
  54. </a-col>
  55. <a-col :md="2" :sm="24">
  56. <a-button id="dataDictionary-refresh" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  57. </a-col>
  58. <!-- <a-col :md="2" :sm="24">
  59. <a-button type="primary" @click="queryParam=''">重置</a-button>
  60. </a-col> -->
  61. </a-row>
  62. </a-form>
  63. </div>
  64. <!-- <a-divider/> 操作按钮-->
  65. <div class="table-operator">
  66. <a-button type="primary" id="dataDictionary-add" icon="plus" @click="openCodeItemModal">添加数据</a-button>
  67. <!-- <a-button type="" icon="delete" @click="delectAll">批量删除</a-button> -->
  68. <a-button type="" id="dataDictionary-renew" icon="reload" @click="$refs.table.refresh(true)">刷新数据</a-button>
  69. </div>
  70. <!-- <div class="textCount">
  71. <a-icon type="info-circle" style="color: #1890FF;margin-right: 10px;" />
  72. <span>已选择<span style="color: #40a9ff;font-weight: 600;margin-left: 10px;">{{selectedNum}}项</span><span class="imgSize">清空</span></span>
  73. </div> -->
  74. <!-- 列表 -->
  75. <s-table
  76. ref="table"
  77. size="small"
  78. rowKey="id"
  79. :columns="columns"
  80. :data="loadData"
  81. :defaultLoadData="false"
  82. bordered
  83. >
  84. <span slot="action" slot-scope="text, record">
  85. <template>
  86. <a class="action-button" :id="'dataDictionary-edit-btn'+record.id" @click="handleEdit(record)">修改</a>
  87. <a v-if="!record.isEnable" :id="'dataDictionary-del-btn'+record.id" class="action-button red-text" @click="delect(record)">删除</a>
  88. </template>
  89. </span>
  90. </s-table>
  91. </div>
  92. </a-col>
  93. </a-row>
  94. <!-- 添加/编辑数据字典弹窗 -->
  95. <codeModal :visible="showCodeModal" :data="codeData" @refresh="getCodeList" @close="showCodeModal = false"></codeModal>
  96. <!-- 添加数据弹窗 -->
  97. <codeItemModal :visible="showItemCodeModal" :data="itemCodeData" @refresh="$refs.table.refresh(true)" @close="showItemCodeModal = false"></codeItemModal>
  98. </a-card>
  99. </template>
  100. <script>
  101. import { commonMixin } from '@/utils/mixin'
  102. // 组件
  103. import { STable, VSelect } from '@/components'
  104. import codeModal from './codeModal.vue'
  105. import codeItemModal from './codeItemModal.vue'
  106. // 接口
  107. import { listLookUp, delLookUp, getLookUpItem, delLookUpItem } from '@/api/lookup.js'
  108. export default {
  109. name: 'PowerDD',
  110. mixins: [commonMixin],
  111. components: {
  112. STable, VSelect, codeModal, codeItemModal
  113. },
  114. props: {},
  115. data () {
  116. // const rowSelection = {
  117. // onChange: (selectedRowKeys, selectedRows) => {
  118. // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  119. // },
  120. // onSelect: (record, selected, selectedRows) => {
  121. // this.selectedNum = selectedRows.length
  122. // console.log(record,'record')
  123. // console.log(selectedRows,'selectedRows')
  124. // },
  125. // onSelectAll: (selected, selectedRows, changeRows) => {
  126. // this.selectedNum = selectedRows.length
  127. // console.log(selected, selectedRows, changeRows)
  128. // }
  129. // }
  130. return {
  131. // 查询参数
  132. queryParam: {
  133. dispName: '', // 名称
  134. isEnable: undefined, // 是否启用
  135. lookupCode: ''
  136. },
  137. noData: false, // 没有数据 为空图片显示
  138. code: '', // 根据输入编码类别/名称搜索字典
  139. selectedNum: '', // 已选择数据条数
  140. selectedKey: [], // 选中的字典编码项
  141. selectedMenu: '', // 选中的菜单名称
  142. formLayout: 'horizontal',
  143. // 提交参数
  144. form: this.$form.createForm(this, { name: 'miniForm' }),
  145. codeList: [], // 字典列表数据
  146. showCodeModal: false, // 添加/编辑数据字典弹窗
  147. showItemCodeModal: false, // 添加数据弹窗
  148. codeData: {}, // 编辑字典行数据
  149. itemCodeData: {}, // 当前行数据
  150. // 表头
  151. columns: [
  152. {
  153. title: '序号',
  154. dataIndex: 'no',
  155. width: '40',
  156. align: 'center'
  157. },
  158. {
  159. title: '名称',
  160. dataIndex: 'dispName',
  161. width: '100',
  162. align: 'center'
  163. },
  164. {
  165. title: '项编码',
  166. dataIndex: 'code',
  167. width: '100',
  168. align: 'center'
  169. },
  170. {
  171. title: '排序值',
  172. dataIndex: 'sort',
  173. width: '100',
  174. align: 'center'
  175. },
  176. {
  177. title: '是否启用',
  178. width: '100',
  179. align: 'center',
  180. dataIndex: 'isEnable',
  181. customRender: function (text) {
  182. if (text == 1) {
  183. return '启用'
  184. } else {
  185. return '禁用'
  186. }
  187. }
  188. },
  189. {
  190. title: '创建时间',
  191. dataIndex: 'createDate',
  192. width: '120',
  193. align: 'center'
  194. },
  195. {
  196. title: '备注',
  197. dataIndex: 'remarks',
  198. width: '100',
  199. align: 'center'
  200. },
  201. {
  202. title: '操作',
  203. width: '100',
  204. align: 'center',
  205. scopedSlots: { customRender: 'action' }
  206. }
  207. ],
  208. // 加载数据方法 必须为 Promise 对象
  209. loadData: parameter => {
  210. console.log(parameter, 'parameter')
  211. // 获取列表数据 有分页
  212. return getLookUpItem(Object.assign(parameter, this.queryParam)).then(res => {
  213. // 计算表格序号
  214. const no = (res.data.pageNo - 1) * res.data.pageSize
  215. for (let i = 0; i < res.data.list.length; i++) {
  216. const _item = res.data.list[i]
  217. _item.no = no + i + 1
  218. _item.isEnable = _item.isEnable + '' === '1'
  219. }
  220. return res.data
  221. })
  222. },
  223. optionAlertShow: false,
  224. windowHeight: 0// 页面高度
  225. }
  226. },
  227. methods: {
  228. // 获取字典列表
  229. getCodeList () {
  230. console.log({ code: this.code })
  231. listLookUp({ code: this.code }).then(res => {
  232. if (res.status == 200) {
  233. this.codeList = res.data
  234. this.noData = false
  235. if (!res.data.length) {
  236. this.noData = true
  237. }
  238. }
  239. })
  240. },
  241. // 添加字典
  242. addCode () {
  243. this.showCodeModal = true
  244. this.codeData = {}
  245. },
  246. // 编辑字典
  247. editCode () {
  248. if (!this.selectedKey.length) {
  249. return this.$message.warning('您还未选择要编辑的字典')
  250. }
  251. this.showCodeModal = true
  252. this.codeData = this.codeList[this.selectedKey]
  253. },
  254. // 删除字典
  255. delectCode () {
  256. if (!this.selectedKey.length) {
  257. return this.$message.warning('您还未选择要删除的字典')
  258. }
  259. const _this = this
  260. const id = this.codeList[this.selectedKey].id
  261. this.$confirm({
  262. title: '警告',
  263. content: `确定要删除 ${this.codeList[this.selectedKey].name} 吗?`,
  264. okText: '确定',
  265. cancelText: '取消',
  266. onOk () {
  267. delLookUp({
  268. id: id
  269. }).then(res => {
  270. if (res.status == 200) {
  271. _this.$message.success('删除成功')
  272. _this.getCodeList()
  273. }
  274. }).catch(() => {
  275. _this.$message.success('删除失败, 请稍后重试')
  276. })
  277. }
  278. })
  279. },
  280. // 字典 取消选择
  281. cancelSel () {
  282. this.selectedKey = []
  283. this.selectedMenu = ''
  284. this.$refs.table.clearTable()
  285. },
  286. // 新增数据
  287. openCodeItemModal () {
  288. if (!this.selectedKey.length) {
  289. return this.$message.warning('请先选择一个字典类别')
  290. }
  291. this.showItemCodeModal = true
  292. this.itemCodeData = { lookupCode: this.codeList[this.selectedKey].code }
  293. },
  294. // 批量删除数据
  295. delectAll () {
  296. if (!this.selectedNum) {
  297. return this.$message.warning('您还未选择要删除的数据')
  298. }
  299. const _this = this
  300. this.$confirm({
  301. title: '警告',
  302. content: `确定要删除您选择的这${this.selectedNum}条数据吗?`,
  303. okText: '确定',
  304. cancelText: '取消',
  305. onOk () {
  306. // delectUserPower({
  307. // id: row.id
  308. // }).then(res => {
  309. // if (res.status == 200) {
  310. // _this.$message.success('删除成功')
  311. // _this.$refs.table.refresh()
  312. // }
  313. // }).catch(() => {
  314. // _this.$message.success('删除失败, 请稍后重试')
  315. // })
  316. }
  317. })
  318. },
  319. // 删除
  320. delect (row) {
  321. const _this = this
  322. this.$confirm({
  323. title: '警告',
  324. content: '确定要删除吗?',
  325. okText: '确定',
  326. cancelText: '取消',
  327. onOk () {
  328. delLookUpItem({
  329. id: row.id
  330. }).then(res => {
  331. console.log(res, 'res1111')
  332. if (res.status == 200) {
  333. _this.$message.success('删除成功')
  334. _this.$refs.table.refresh()
  335. }
  336. }).catch(() => {
  337. _this.$message.success('删除失败, 请稍后重试')
  338. })
  339. }
  340. })
  341. },
  342. // 编辑打开添加数据弹窗
  343. handleEdit (row) {
  344. console.log(row, 'row')
  345. this.showItemCodeModal = true
  346. this.itemCodeData = row
  347. },
  348. // 计算表格高度
  349. setTableH () {
  350. this.windowHeight = window.innerHeight - 90
  351. }
  352. },
  353. beforeCreate () {
  354. this.form = this.$form.createForm(this, { name: 'miniForm' })
  355. },
  356. // beforeRouteEnter (to, from, next) {
  357. // next(vm => {
  358. // vm.getCodeList()
  359. // })
  360. // },
  361. mounted () {
  362. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  363. this.getCodeList()
  364. this.cancelSel()
  365. this.setTableH()
  366. }
  367. },
  368. activated () {
  369. // 如果是新页签打开,则重置当前页面
  370. if (this.$store.state.app.isNewTab) {
  371. this.getCodeList()
  372. this.cancelSel()
  373. this.setTableH()
  374. }
  375. },
  376. watch: {
  377. // 重组菜单列表数据
  378. selectedKey (newValue, oldValue) {
  379. console.log(newValue, 'newValue')
  380. if (newValue.length) {
  381. this.selectedMenu = this.codeList[this.selectedKey].name + ' ' + '(' + this.codeList[this.selectedKey].code + ')'
  382. this.queryParam.lookupCode = this.codeList[this.selectedKey].code
  383. this.$refs.table.refresh(true)
  384. }
  385. }
  386. }
  387. }
  388. </script>
  389. <style scoped>
  390. .menu-box::-webkit-scrollbar{
  391. width: 6px;
  392. height: 6px ;
  393. }
  394. .menu-box::-webkit-scrollbar-thumb{
  395. width: 6px;
  396. height: 6px ;
  397. border-radius: 4px;
  398. -webkit-box-shadow: inset 0 0 2px #d1d1d1;
  399. background: #e4e4e4;
  400. }
  401. .textCount{
  402. border: 1px solid #91d5ff;
  403. background-color: #e6f7ff;
  404. border-radius: 5px;
  405. padding: 5px 10px 5px 20px;
  406. margin: 10px 0;
  407. color: rgba(0, 0, 0);
  408. }
  409. .imgSize{
  410. color: #2d8cf0;
  411. margin-left: 10px;
  412. font-size: 14px;
  413. }
  414. .action-button{
  415. line-height: 40px;
  416. white-space: nowrap;
  417. padding: 5px 10px;
  418. background-color: #1890ff;
  419. border-radius: 4px;
  420. color: #fff;
  421. margin-right: 5px;
  422. }
  423. .red-text{
  424. background-color: red;
  425. }
  426. </style>