zoneInput.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  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. export default {
  25. data() {
  26. return {
  27. form: {},
  28. inputTypeList: {},//输入框表头种类
  29. inputData: [],//所有输入框
  30. }
  31. },
  32. props: {
  33. labelWidth: {
  34. default: "130px",
  35. type: String
  36. }
  37. },
  38. created() {
  39. },
  40. methods: {
  41. //初始化
  42. init(val) {
  43. this.inputTypeList = {};
  44. this.inputData = [];
  45. this.inputData = val.concat()
  46. this.filterInput();
  47. this.inputGroup();
  48. },
  49. //数据过滤
  50. filterInput() {
  51. this.inputData = this.inputData.filter(item => {
  52. return item.Editable == true && item.Visible == true && item.FirstName && item.InfoPointCode;
  53. })
  54. let numbersInput = ['A1', 'A2'];
  55. let stringInput = ['B1', 'L', 'M'];
  56. let arrayInput = ['D1'];
  57. let cascaderInput = ['D1L'];
  58. this.inputData.map(item => {
  59. if (numbersInput.indexOf(item.InputMode) != -1) {
  60. item.inputValue = null;
  61. }
  62. else if (stringInput.indexOf(item.InputMode) != -1) {
  63. item.inputValue = '';
  64. }
  65. else if (arrayInput.indexOf(item.InputMode) != -1) {
  66. let options = JSON.parse(item.DataSource)
  67. item.inputValue = '';
  68. item.options = options;
  69. }
  70. else if(cascaderInput.indexOf(item.InputMode) != -1){
  71. let options = JSON.parse(item.DataSource);
  72. if (options[0] && options[0].Content) {
  73. item.props = {
  74. value: 'Code',
  75. label: 'Name',
  76. children: 'Content'
  77. }
  78. }
  79. item.options = options;
  80. item.inputValue = [];
  81. }
  82. else {
  83. item.inputValue = '';
  84. }
  85. });
  86. },
  87. //数据分组
  88. inputGroup() {
  89. this.inputData.map(item => {
  90. if (!this.inputTypeList[item.FirstName]) {
  91. this.inputTypeList[item.FirstName] = [];
  92. }
  93. this.inputTypeList[item.FirstName].push(item)
  94. })
  95. for (let key in this.inputTypeList) {
  96. if (this.inputTypeList[key] instanceof Array) {
  97. this.inputTypeList[key].sort((item1, item2) => { return item1.Sort < item2.Sort });
  98. }
  99. }
  100. },
  101. //父组件获取form
  102. getFormData() {
  103. let f = {}
  104. for (let key in this.inputTypeList) {
  105. this.inputTypeList[key].map(item => {
  106. if (item.inputValue != '' && item.inputValue != null) {
  107. if (item.inputValue instanceof Array) {
  108. f[item.InfoPointCode] = item.inputValue.pop();
  109. }
  110. else {
  111. f[item.InfoPointCode] = item.inputValue;
  112. }
  113. }
  114. })
  115. }
  116. return f;
  117. }
  118. }
  119. }
  120. </script>
  121. <style lang="less" scoped>
  122. .input-item {
  123. display: inline-block;
  124. position: relative;
  125. margin-right: 10px;
  126. }
  127. #zoneinput {
  128. /deep/ .el-form-item__content {
  129. width: 220px;
  130. }
  131. }
  132. </style>