cruxDialog.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <template>
  2. <el-dialog title="关键信息点" :visible.sync="dialogFormVisible" class="crux-dialog">
  3. <section v-for="(val,key,i) in checkList" :key="i">
  4. <h4 class="base">{{key}}</h4>
  5. <el-checkbox
  6. v-for="(option,index) in val"
  7. :key="option+index"
  8. :label="option.InfoPointName"
  9. v-model="option.KeyWord"
  10. />
  11. </section>
  12. <div slot="footer" class="dialog-footer">
  13. <el-button @click="dialogFormVisible = false">取 消</el-button>
  14. <el-button type="primary" @click="save">保 存</el-button>
  15. </div>
  16. </el-dialog>
  17. </template>
  18. <script>
  19. import {setDataDictionary} from "@/api/scan/request";
  20. export default {
  21. name: "cruxDialog",
  22. props: ['crux', 'type'],
  23. data() {
  24. return {
  25. dialogFormVisible: false,
  26. checkList: {},
  27. checkboxGroup: []
  28. }
  29. },
  30. computed: {
  31. allChecks() {
  32. const tmp = [];
  33. for (const key in this.checkList) {
  34. if (this.checkList.hasOwnProperty(key)) {
  35. const element = this.checkList[key];
  36. tmp.push(...element);
  37. }
  38. }
  39. return tmp;
  40. }
  41. },
  42. watch: {
  43. crux() {
  44. this.changeList()
  45. }
  46. },
  47. methods: {
  48. changeList() {
  49. const tmp = {};
  50. for (let key in this.crux) {
  51. if (this.crux.hasOwnProperty(key)) {
  52. const element = this.crux[key];
  53. tmp[key] = [
  54. ...element.paths.map(i => ({
  55. InfoPointCode: i.InfoPointCode,
  56. KeyWord: i.KeyWord,
  57. Type: this.type,
  58. InfoPointName: i.InfoPointName
  59. }))
  60. ]
  61. }
  62. }
  63. this.checkList = tmp;
  64. },
  65. dialogOpen() {
  66. this.dialogFormVisible = true
  67. },
  68. save() {
  69. let arrLenght = this.allChecks.filter(i => i.KeyWord)
  70. if (arrLenght.length > 6) {
  71. this.$message.info('不可超过6个')
  72. return false
  73. } else {
  74. let param = this.allChecks.map(i => {
  75. if (i.InfoPointName) {
  76. delete i.InfoPointName
  77. }
  78. return {...i}
  79. })
  80. setDataDictionary(param, res => {
  81. this.dialogFormVisible = false
  82. this.$emit('cruxSuccess')
  83. this.$message('保存成功')
  84. });
  85. }
  86. }
  87. }
  88. }
  89. </script>
  90. <style scoped lang="less">
  91. .crux-dialog {
  92. .el-checkbox{
  93. display: inline-block;
  94. width: 20%;
  95. }
  96. /deep/ .el-dialog__body {
  97. height: 420px;
  98. overflow: auto;
  99. }
  100. }
  101. </style>