zoneInput.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <div id="zoneinput">
  3. <el-form label-position="left" :label-width="labelWidth" :model="form">
  4. <div v-for="(titem, tkey) in inputTypeList" :key="tkey">
  5. <h4>{{ tkey }}</h4>
  6. <el-form-item v-for="(item, key) in titem" :key="key" :label="item.InfoPointName" class="input-item">
  7. <el-input v-model="item.inputValue" v-if="item.InputMode == 'A1'|| item.InputMode == 'A2'" type="number">
  8. <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
  9. </el-input>
  10. <el-input v-model="item.inputValue" v-else-if="item.InputMode == 'B1' || item.InputMode == 'L' || item.InputMode == 'M'"></el-input>
  11. <el-select v-model="item.inputValue" v-else-if="item.InputMode == 'D1'" placeholder="请选择">
  12. <el-option v-for="(soption,skey) in item.options" :key="skey" :label="soption.Name" :value="soption.Code">
  13. </el-option>
  14. </el-select>
  15. <el-cascader v-model="item.inputValue" v-else-if="item.InputMode == 'D1L'" placeholder="请选择"
  16. :props="item.props" :options="item.options" filterable :show-all-levels="false"></el-cascader>
  17. <el-input v-model="item.inputValue" v-else></el-input>
  18. </el-form-item>
  19. </div>
  20. </el-form>
  21. </div>
  22. </template>
  23. <script>
  24. import tools from "@/utils/scan/tools";
  25. export default {
  26. data() {
  27. return {
  28. form: {},
  29. inputTypeList: {},//输入框表头种类
  30. inputData: [],//所有输入框
  31. }
  32. },
  33. props: {
  34. labelWidth: {
  35. default: "130px",
  36. type: String
  37. }
  38. },
  39. created() {
  40. },
  41. methods: {
  42. //初始化
  43. init(val) {
  44. this.inputTypeList = {};
  45. this.inputData = [];
  46. this.inputData = val.concat()
  47. this.filterInput();
  48. this.inputGroup();
  49. },
  50. //数据过滤
  51. filterInput() {
  52. this.inputData = this.inputData.filter(item => {
  53. return item.Editable == true && item.Visible == true && item.FirstName && item.InfoPointCode;
  54. })
  55. let numbersInput = ['A1', 'A2'];
  56. let stringInput = ['B1', 'L', 'M'];
  57. let arrayInput = ['D1'];
  58. let cascaderInput = ['D1L'];
  59. this.inputData.map(item => {
  60. if (numbersInput.indexOf(item.InputMode) != -1) {
  61. item.inputValue = null;
  62. }
  63. else if (stringInput.indexOf(item.InputMode) != -1) {
  64. item.inputValue = '';
  65. }
  66. else if (arrayInput.indexOf(item.InputMode) != -1) {
  67. let options = JSON.parse(item.DataSource)
  68. item.inputValue = '';
  69. item.options = options;
  70. }
  71. else if(cascaderInput.indexOf(item.InputMode) != -1){
  72. let options = JSON.parse(item.DataSource);
  73. if (options[0] && options[0].Content) {
  74. item.props = {
  75. value: 'Code',
  76. label: 'Name',
  77. children: 'Content'
  78. }
  79. }
  80. item.options = options;
  81. item.inputValue = [];
  82. }
  83. else {
  84. item.inputValue = '';
  85. }
  86. });
  87. },
  88. //数据分组
  89. inputGroup() {
  90. this.inputData.map(item => {
  91. if (!this.inputTypeList[item.FirstName]) {
  92. this.inputTypeList[item.FirstName] = [];
  93. }
  94. this.inputTypeList[item.FirstName].push(item)
  95. })
  96. for (let key in this.inputTypeList) {
  97. if (this.inputTypeList[key] instanceof Array) {
  98. this.inputTypeList[key].sort((item1, item2) => { return item1.Sort < item2.Sort });
  99. }
  100. }
  101. },
  102. //父组件获取form
  103. getFormData() {
  104. let f = {}
  105. for (let key in this.inputTypeList) {
  106. this.inputTypeList[key].map(item => {
  107. if (item.inputValue != '' && item.inputValue != null) {
  108. if (item.inputValue instanceof Array) {
  109. tools.setDataForKey(f, item.Path, item.inputValue.pop());
  110. }
  111. else {
  112. tools.setDataForKey(f, item.Path, item.inputValue);
  113. }
  114. }
  115. })
  116. }
  117. return f;
  118. }
  119. }
  120. }
  121. </script>
  122. <style lang="less" scoped>
  123. .input-item {
  124. display: inline-block;
  125. position: relative;
  126. margin-right: 10px;
  127. }
  128. #zoneinput {
  129. /deep/ .el-form-item__content {
  130. width: 220px;
  131. }
  132. }
  133. </style>