dataDictionary.vue 13 KB

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