formItems.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <div id="inforsPoint">
  3. <el-form ref="ruleForm" :model="form" label-width="150px" :rules="rules" :inline="true" :label-position="'right'">
  4. <div v-for="item in InforsList" :key="item.infoPointCode" style="width:50%;display: inline-block">
  5. <el-form-item
  6. :label="item.name"
  7. :prop="item.code"
  8. v-if="all||item.visible"
  9. :class="{FloorTypeSelect:item.dataType == 'ENUM'||item.unit}">
  10. <el-input
  11. v-model.trim="form[item.path]"
  12. v-if="item.infoPointCode == 'bimLocation' || item.infoPointCode =='modelId'"
  13. disabled/>
  14. <!--二维码相关-->
  15. <span v-else-if="item.infoPointCode == 'DefaultQRCode' ">
  16. <el-input v-if="!form[item.path]" v-model.trim="form[item.path]" disabled/>
  17. <el-popover v-else placement="right" width="210" trigger="click">
  18. <div style="overflow:hidden;">
  19. <img
  20. style="width:200px;height:200px;"
  21. :src="'/image-service/common/file_get/'+ form[item.path] +'?systemId=dataPlatform'"
  22. alt="二维码">
  23. </div>
  24. <el-button slot="reference" type="text">点击查看</el-button>
  25. </el-popover>
  26. </span>
  27. <span v-else-if="item.infoPointCode == 'QRCodePic' ">
  28. <el-input v-if="!form[item.path]" v-model.trim="form[item.path]" disabled/>
  29. <el-popover v-else placement="right" width="210" trigger="click">
  30. <div style="overflow:hidden;">
  31. <img
  32. style="width:200px;height:200px;"
  33. :src="'/image-service/common/file_get/'+ form[item.path] +'?systemId=dataPlatform'"
  34. alt="二维码">
  35. </div>
  36. <el-button slot="reference" type="text">点击查看</el-button>
  37. </el-popover>
  38. </span>
  39. <!--/二维码相关-->
  40. <span v-else-if="item.dataType == 'STRING'">
  41. <el-input v-model.trim="form[item.path]"
  42. :disabled="!item.editable"
  43. :placeholder="(item.dataType == 'STRING' && item.path==='localId') ? '填写示例:F1、B1?':'' "/>
  44. <div v-if="item.dataType == 'STRING' && item.path==='localId' && isShowTitle"
  45. style="color: gray;font-size: 12px">
  46. 用于楼层平面图切换
  47. </div>
  48. </span>
  49. <el-input v-model.trim="form[item.path]" v-else-if="item.dataType == 'INTEGER'||item.dataType == 'DOUBLE'"
  50. type="number">
  51. <template slot="append" v-if="item.unit">{{ item.unit }}</template>
  52. </el-input>
  53. <el-select v-model="form[item.path]" placeholder="请选择" v-else-if="item.dataType == 'ENUM'">
  54. <el-option v-for="op in item.options" :key="op.code" :label="op.name" :value="op.code"></el-option>
  55. </el-select>
  56. <el-input v-model.trim="form[item.path]" v-else :placeholder="item.dataType?'':'字典无输入类型'"></el-input>
  57. </el-form-item>
  58. </div>
  59. </el-form>
  60. </div>
  61. </template>
  62. <script>
  63. import {getDataDictionary} from "@/api/dict";
  64. export default {
  65. props: {
  66. type: {
  67. default: 'floor'
  68. }
  69. },
  70. data() {
  71. let validateId = (rule, value, callback) => {
  72. if (!value) {
  73. this.isShowTitle = false
  74. return callback(new Error('请输入楼层本地编码'));
  75. } else {
  76. this.isShowTitle = true
  77. callback()
  78. }
  79. }
  80. // }
  81. return {
  82. form: {},
  83. isShowTitle: true,
  84. InforsList: [],
  85. all: true, // 默认显示全部
  86. rules: {
  87. "localId": [
  88. {validator: validateId, trigger: 'blur', "required": true}
  89. ],
  90. "localName": [
  91. {"required": true, "message": "请输入楼层本地名称", "trigger": "blur"}
  92. ],
  93. "floorSequenceID": [
  94. {"required": true, "message": "请输入楼层顺序号", "trigger": "blur"}
  95. ]
  96. }
  97. };
  98. },
  99. created() {
  100. this.getInforsPoint()
  101. }
  102. ,
  103. methods: {
  104. getInforsPoint() {
  105. let params = {
  106. type: this.type,
  107. // orders: "sort asc,infoPointCode asc",
  108. pageNumber: 1,
  109. pageSize: 1000,
  110. orders: "sort asc, name desc",
  111. };
  112. getDataDictionary(params, res => {
  113. let arr = res.content.map(item => {
  114. const category = ['ENUM', 'MENUM', 'BOOLEAN']
  115. if (item.category == 'STATIC' && category.includes(item.dataType) && item.dataSource) {
  116. item.options = item.dataSource
  117. if (item.options[0]) {
  118. item.props = {
  119. value: 'code',
  120. label: 'name',
  121. children: 'content',
  122. checkStrictly: true
  123. }
  124. }
  125. }
  126. switch (item.code) { //过滤掉待删除的
  127. case 'floorIdentity':
  128. case 'relatedSchedule':
  129. case 'outPeopleFlow':
  130. case 'inPeopleFlow':
  131. case 'exsitPeopleNum':
  132. break;
  133. default:
  134. return item
  135. }
  136. })
  137. //手动删除掉数据字典中不存在的字段,等待后台同步
  138. this.InforsList = arr.filter(t => t && t.code != 'FloorQRCode')
  139. })
  140. },
  141. submitForm(call) {
  142. this.$refs.ruleForm.validate((valid) => {
  143. if (valid) {
  144. call()
  145. } else {
  146. return false;
  147. }
  148. });
  149. },
  150. }
  151. };
  152. </script>
  153. <style lang="scss" scoped>
  154. #inforsPoint {
  155. .el-form-item {
  156. /deep/ label.el-form-item__label {
  157. font-size: 12px;
  158. }
  159. }
  160. /deep/ .FloorTypeSelect .el-form-item__content {
  161. width: 200px;
  162. }
  163. /deep/ .el-input--small {
  164. width: 200px
  165. }
  166. }
  167. </style>