formItems.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  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.inputMode == 'D1'||item.unit}">
  10. <el-input
  11. v-model="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="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="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.inputMode == 'B1'">
  41. <el-input v-model="form[item.path]"
  42. :placeholder="(item.inputMode === 'B1' && item.path==='localId') ? '填写示例:F1、B1?':'' "/>
  43. <div v-if="item.inputMode === 'B1' && item.path==='localId' && isShowTitle"
  44. style="color: gray;font-size: 12px">
  45. 用于楼层平面图切换
  46. </div>
  47. </span>
  48. <el-input v-model="form[item.path]" v-else-if="item.inputMode == 'A1'||item.inputMode == 'A2'" type="number">
  49. <template slot="append" v-if="item.unit">{{ item.unit }}</template>
  50. </el-input>
  51. <el-select v-model="form[item.path]" placeholder="请选择" v-else-if="item.inputMode == 'D1'">
  52. <el-option v-for="op in item.options" :key="op.code" :label="op.name" :value="op.code"></el-option>
  53. </el-select>
  54. <el-cascader
  55. v-else-if="item.inputMode == 'D1L'"
  56. placeholder="请选择"
  57. :options="item.options"
  58. v-model="form[item.path]"
  59. :props="item.props"
  60. filterable
  61. :show-all-levels="false"
  62. clearable
  63. style="width: 200px"/>
  64. <el-input
  65. v-else-if="item.inputMode == 'L'||item.inputMode == 'L1'||item.inputMode == 'L2'||item.inputMode == 'M'"
  66. v-model="form[item.path]">
  67. <template slot="append" v-if="item.unit">{{ item.unit }}</template>
  68. </el-input>
  69. <el-input v-model="form[item.path]" v-else disabled title="暂不支持" :placeholder="item.inputMode?'':'字典无输入类型'"></el-input>
  70. </el-form-item>
  71. </div>
  72. </el-form>
  73. </div>
  74. </template>
  75. <script>
  76. import {getDataDictionary} from "@/api/dict";
  77. export default {
  78. props: {
  79. type: {
  80. default: 'floor'
  81. }
  82. },
  83. data() {
  84. let validateId = (rule, value, callback) => {
  85. if (!value) {
  86. this.isShowTitle = false
  87. return callback(new Error('请输入楼层本地编码'));
  88. } else {
  89. this.isShowTitle = true
  90. callback()
  91. }
  92. }
  93. // }
  94. return {
  95. form: {},
  96. isShowTitle: true,
  97. InforsList: [],
  98. all: true, // 默认显示全部
  99. rules: {
  100. "localId": [
  101. {validator: validateId, trigger: 'blur', "required": true}
  102. ],
  103. "localName": [
  104. {"required": true, "message": "请输入楼层本地名称", "trigger": "blur"}
  105. ],
  106. "floorSequenceID": [
  107. {"required": true, "message": "请输入楼层顺序号", "trigger": "blur"}
  108. ]
  109. }
  110. };
  111. },
  112. created() {
  113. this.getInforsPoint()
  114. }
  115. ,
  116. methods: {
  117. getInforsPoint() {
  118. let params = {
  119. type: this.type,
  120. // orders: "sort asc,infoPointCode asc",
  121. pageNumber: 1,
  122. pageSize: 1000
  123. };
  124. getDataDictionary(params, res => {
  125. let arr = res.content.map(item => {
  126. if ((item.inputMode === 'D1' || item.inputMode === 'D2' || item.inputMode === 'E2' || item.inputMode === 'D1L') && item.dataSource) {
  127. // item.options = JSON.parse(item.dataSource)
  128. item.options = item.dataSource
  129. if (item.options[0] && item.options[0].content) {
  130. item.props = {
  131. value: 'code',
  132. label: 'name',
  133. children: 'content',
  134. checkStrictly: true
  135. }
  136. }
  137. }
  138. switch (item.code) { //过滤掉待删除的
  139. case 'floorIdentity':
  140. case 'relatedSchedule':
  141. case 'outPeopleFlow':
  142. case 'inPeopleFlow':
  143. case 'exsitPeopleNum':
  144. break;
  145. default:
  146. return item
  147. }
  148. })
  149. //手动删除掉数据字典中不存在的字段,等待后台同步
  150. this.InforsList = arr.filter(t => t && t.code != 'FloorQRCode')
  151. })
  152. },
  153. submitForm(call) {
  154. this.$refs.ruleForm.validate((valid) => {
  155. if (valid) {
  156. call()
  157. } else {
  158. return false;
  159. }
  160. });
  161. },
  162. }
  163. };
  164. </script>
  165. <style lang="scss" scoped>
  166. #inforsPoint {
  167. .el-form-item {
  168. /deep/ label.el-form-item__label {
  169. font-size: 12px;
  170. }
  171. }
  172. /deep/ .FloorTypeSelect .el-form-item__content {
  173. width: 200px;
  174. }
  175. /deep/ .el-input--small {
  176. width: 200px
  177. }
  178. }
  179. </style>