formItems.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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.InfoPointName"
  7. :prop="item.InfoPointCode"
  8. v-if="all||item.Visible"
  9. :class="{FloorTypeSelect:item.InputMode == 'D1'||item.Unit}"
  10. >
  11. <span v-if="item.InputMode == 'B1'">
  12. <el-input
  13. v-model="form[item.Path]"
  14. :placeholder="(item.InputMode === 'B1' && item.Path==='FloorLocalID') ? '填写示例:F1、B1?':'' "/>
  15. <div
  16. v-if="item.InputMode === 'B1' && item.Path==='FloorLocalID' && isShowTitle"
  17. style="color: gray;font-size: 12px"
  18. >用于楼层平面图切换</div>
  19. </span>
  20. <el-input v-model="form[item.Path]" v-else-if="item.InputMode == 'A1'||item.InputMode == 'A2'" type="number">
  21. <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
  22. </el-input>
  23. <el-select v-model="form[item.Path]" placeholder="请选择" v-else-if="item.InputMode == 'D1'">
  24. <el-option v-for="op in item.options" :key="op.Code" :label="op.Name" :value="op.Code"></el-option>
  25. </el-select>
  26. <el-input v-model="form[item.Path]"
  27. v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'">
  28. <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
  29. </el-input>
  30. <el-input v-model="form[item.Path]" v-else disabled title="暂不支持"></el-input>
  31. </el-form-item>
  32. </div>
  33. </el-form>
  34. </div>
  35. </template>
  36. <script>
  37. import {getDataDictionary} from "@/api/scan/request";
  38. // v-for="item in InforsList" :key="item.InfoPointCode"
  39. export default {
  40. props: {
  41. type: {
  42. default: 'Floor'
  43. }
  44. },
  45. data() {
  46. let validateId = (rule, value, callback) => {
  47. if (!value) {
  48. this.isShowTitle = false
  49. return callback(new Error('请输入楼层本地编码'));
  50. } else {
  51. this.isShowTitle = true
  52. callback()
  53. }
  54. }
  55. // }
  56. return {
  57. form: {},
  58. isShowTitle: true,
  59. InforsList: [],
  60. all: true, // 默认显示全部
  61. rules: {
  62. "FloorLocalID": [
  63. {validator: validateId, trigger: 'blur', "required": true}
  64. ],
  65. "FloorLocalName": [
  66. {"required": true, "message": "请输入楼层本地名称", "trigger": "blur"}
  67. ],
  68. "FloorSequenceID": [
  69. {"required": true, "message": "请输入楼层顺序号", "trigger": "blur"}
  70. ]
  71. }
  72. };
  73. },
  74. created() {
  75. this.getInforsPoint()
  76. }
  77. ,
  78. methods: {
  79. getInforsPoint() {
  80. let params = {
  81. data: {
  82. Orders: "sort asc,InfoPointCode asc",
  83. PageNumber: 1,
  84. PageSize: 1000
  85. },
  86. type: this.type
  87. };
  88. getDataDictionary(params, res => {
  89. this.InforsList = res.Content.map(item => {
  90. if (item.InputMode === 'D1') {
  91. item.options = JSON.parse(item.DataSource)
  92. }
  93. return item
  94. })
  95. })
  96. }
  97. ,
  98. submitForm(call) {
  99. this.$refs.ruleForm.validate((valid) => {
  100. if (valid) {
  101. call()
  102. } else {
  103. return false;
  104. }
  105. });
  106. }
  107. ,
  108. }
  109. };
  110. </script>
  111. <style lang="scss" scoped>
  112. #inforsPoint {
  113. .el-form-item {
  114. /deep/ label.el-form-item__label {
  115. font-size: 12px;
  116. }
  117. }
  118. /deep/ .FloorTypeSelect .el-form-item__content {
  119. width: 200px;
  120. }
  121. /deep/ .el-input--small {
  122. width: 200px
  123. }
  124. }
  125. </style>