lshcomment 1.0.0

package/src/components/custom-fields1/index.vue

@@ -0,0 +1,471 @@
+<template>
+  <div class="custom-fields">
+    <el-table
+      :data="configInfoDetailList"
+      border
+      max-height="400"
+      style="width: 100%">
+      <el-table-column
+        label="序号"
+        align="center"
+        shwo-overflow-tooltip
+        min-width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="fieldName"
+        align="center"
+        min-width="160"
+        label="字段名称">
+        <template slot-scope="scope">
+          <el-input v-model.trim="scope.row.fieldName" auto-complete="off"></el-input>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="fieldType"
+        align="center"
+        min-width="140"
+        label="字段类型">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.fieldType" 
+            @visible-change="handleVisibleChange"
+            @change="handleChaneColumnTypeType(scope.row)">
+            <el-option
+              v-for="item in columnTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="fieldConfiguration"
+        align="center"
+        min-width="200"
+        label="字段配置(半角逗号隔开)">
+        <template slot-scope="scope">
+          <template v-if="scope.row.fieldType == 1 || scope.row.fieldType == 2">
+            <el-input
+              v-model.trim="scope.row.fieldConfiguration"
+              auto-complete="off"
+              @blur="getFormatType(scope.row.fieldConfiguration, scope.row, scope.$index)"
+            />
+          </template>
+          <template v-if="scope.row.fieldType == 3">
+            <el-select v-model="scope.row.fieldConfiguration">
+              <el-option
+                v-for="item in formatDateType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+
+          <template v-if="scope.row.fieldType == 5">
+            <el-select v-model="scope.row.fieldConfiguration">
+              <el-option
+                v-for="item in SAPOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"/>
+            </el-select>
+          </template>
+
+          <template v-if="scope.row.fieldType == 6">
+            <el-select v-model="scope.row.fieldConfiguration">
+              <el-option
+                v-for="item in moneyType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"/>
+            </el-select>
+          </template>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        prop="fieldDefault"
+        min-width="160"
+        label="字段默认值">
+        <template slot-scope="scope">
+          <template v-if="scope.row.fieldType == 0">
+            <el-input v-model.trim="scope.row.fieldDefault" auto-complete="off"/>
+          </template>
+          <template v-else-if="scope.row.fieldType == 1">
+            <el-select key="select" v-model="scope.row.fieldDefault">
+              <el-option
+                v-for="item in scope.row.fieldOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+          <template v-else-if="scope.row.fieldType == 2">
+            <el-tooltip :content="scope.row.multipleColumnValue.toString()" :disabled="!scope.row.multipleColumnValue.toString()" placement="top">
+              <el-select key="multipleSelect" multiple v-model="scope.row.multipleColumnValue">
+                <el-option
+                  v-for="item in scope.row.fieldOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"/>
+              </el-select>
+            </el-tooltip>
+          </template>
+          <template v-else-if="scope.row.fieldType == 3">
+            <el-select key="dateSelect" v-model="scope.row.fieldDefault">
+              <el-option
+                v-for="item in dateType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+
+          <template v-if="scope.row.fieldType == 4">
+            <a href="javascript:void(0)" @click="findContractFieldByParentId(scope)">配置字段列表</a>
+          </template>
+
+          <template v-else-if="scope.row.fieldType == 5">
+            <el-select key="dateSelect" v-model="scope.row.fieldDefault">
+              <el-option
+                v-for="item in isChangeType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"/>
+            </el-select>
+          </template>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="操作"
+        align="center"
+        v-if="isCustom"
+        show-overflow-tooltip
+        min-width="140">
+        <template slot-scope="scope">
+          <b-button size="sm" variant="danger" @click="handleDelete(scope)" v-if="isMoveUp">上移</b-button>
+          <b-button size="sm" variant="danger" @click="handleDelete(scope)" v-if="isDel">删除</b-button>
+          <b-button size="sm" variant="danger" @click="handleDelete(scope)" v-if="isReset">恢复默认值</b-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <b-button 
+      v-if="isAdd"
+      size="sm" variant="primary"
+      class="mt-10" @click="handleAdd">
+      添加
+    </b-button>
+
+    <slot name="btns" :list="configInfoDetailList"></slot>
+  </div>
+</template>
+
+<script>
+/**
+ * @description 自定义字段组件
+ * @author lavn
+ * @date 2020-06-29
+ */
+export default {
+  props: {
+    configDetailList: {
+      type: Array,
+      default: () => []
+    },
+    isAdd: {
+      type: Boolean,
+      default: false
+    },
+    isCustom: {
+      type: Boolean,
+      default: false
+    },
+    isMoveUp: {
+      type: Boolean,
+      default: false
+    },
+    isDel: {
+      type: Boolean,
+      default: false
+    },
+    isReset: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      configInfoDetailList: [],    // 配置字段信息
+      filterList: [],              // isShow === 0
+      FieldFlag: false,
+      columnTypeOptions: [
+        {
+          value: 0,
+          label: '文本'
+        },
+        {
+          value: 1,
+          label: '单选'
+        },
+        {
+          value: 2,
+          label: '多选'
+        },
+        {
+          value: 3,
+          label: '日期'
+        },
+        {
+          value: 4,
+          label: '父级类型'
+        },
+        {
+          value: 5,
+          label: 'SAP字段'
+        },
+        {
+          value: 6,
+          label: '金额'
+        }
+      ],
+      formatDateType: [
+        {
+          value: '1',
+          label: 'YYYY-MM-DD'
+        }
+      ],
+      SAPOptions: [],
+      moneyType: [
+        {
+          value: 0,
+          label: '￥2000.22'
+        },
+        {
+          value: 1,
+          label: '2000.22元'
+        },
+        {
+          value: 2,
+          label: '2000.22'
+        },
+        {
+          value: 3,
+          label: '贰仟元贰角贰分'
+        }
+      ],
+      dateType: [
+        {
+          value: '0',
+          label: '默认为空'
+        }, 
+        {
+          value: '1',
+          label: '当前时间'
+        }
+      ],
+      // 字段默认值-SAP字段
+      isChangeType: [
+        {
+          value: '0',
+          label: '为空不可改'
+        },
+        {
+          value: '1',
+          label: '为空时可更改'
+        }
+      ],
+    }
+  },
+
+  watch: {
+    configDetailList: {
+      handler(newVal, oldVal) {
+        newVal.map(item => {
+          let arr = item.fieldConfiguration.split('|')
+      
+          let fieldOptions = arr.map(item => {
+            return {label: item, value: item}
+          })
+          item.fieldOptions = fieldOptions
+        })
+        this.configInfoDetailList = newVal
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+
+    /**
+     * 下拉框出现/隐藏时触发-修改字段类型
+     * @method handleVisibleChange
+     * @param {Boolean} flag 显示-true 隐藏-false
+     */
+    handleVisibleChange(flag) {
+      this.FieldFlag = flag
+    },
+
+
+    /**
+     * 修改字段类型
+     * @method handleChaneColumnTypeType
+     * @param {Object} Vo 行对象
+     */
+    handleChaneColumnTypeType(Vo) {
+      if (!this.FieldFlag) return
+      Vo.fieldConfiguration = Vo.fieldType == 3 ? '1' : ''
+      Vo.fieldDefault = Vo.fieldType == 3 ? '1' : ''
+      if (Vo.fieldType == 5) {
+        Vo.isCheck = 1
+        Vo.fieldDefault = '0'
+      } else {
+        delete Vo.isCheck
+      }
+      this.$set(Vo, 'fieldOptions', [])
+      this.$set(Vo, 'multipleColumnValue', [])
+    },
+
+    optionKeyup(e) {
+      let val = e.target.value
+      if (val === '|') {
+        e.target.value = ''
+        return
+      }
+      let str = val.substr(-2, 2)
+      if (str === '||') {
+        e.target.value = val.substr(0, val.length - 1)
+      }
+      
+    },
+    /**
+     * 修改字段默认值
+     * @method handleBlur
+     * @param {object} scope 整行对象
+     */
+    handleBlur(scope) {      
+      let arr = scope.row.fieldConfiguration.split('|')
+      let fieldOptions = []
+      arr.forEach(item => {
+        item && fieldOptions.push({label: item, value: item})
+      })
+      this.$set(scope.row, 'fieldDefault', arr[0])
+      this.$set(this.configInfoDetailList[scope.$index], 'fieldOptions', fieldOptions)
+      scope.row.fieldType === 2 ? this.$set(scope.row, 'fieldDefault', []) : this.$set(scope.row, 'fieldDefault', '')
+    },
+
+    /**
+     * 获取字段默认值
+     * @method getFormatType
+     */
+    getFormatType(val, row, index) {
+      let list = []
+      let str = val.replace(/，/g, ',')
+      let arr = str.split(',')
+      let fieldOptions = this.formatType(val, row)
+      
+      row.multipleColumnValue.forEach(item => {
+        if (item === '') {
+          list.push('')
+        } else {
+          let index = arr.findIndex(childItem => {
+            return childItem == item
+          })
+          if (index !== -1) {
+            list.push(arr[index])
+          }
+        }
+      })
+
+      this.$set(row, 'multipleColumnValue', list)
+      this.$set(row, 'fieldOptions', fieldOptions)
+    },
+
+    formatType(val, row) {
+      if (!val) return
+      let fieldOptions = (row.fieldType == 1 || row.fieldType == 2) ? [{value:'',label:'默认为空'}] : []
+      let str = val.replace(/，/g, ',')
+      let arr = str.split(',')
+
+      arr.forEach(item => {
+        let Vo = {
+          value: item,
+          label: item
+        }
+        fieldOptions.push(Vo)
+      })
+
+      return fieldOptions
+    },
+
+    /**
+     * 增加一行
+     * @method handleAdd
+     */
+    handleAdd() {
+      let item = {
+        fieldName:'',
+        fieldType: 0,
+        fieldConfiguration: null,
+        fieldDefault:'',
+        // multipleColumnValue: '',
+      }
+      this.configInfoDetailList.push(item)
+    },
+
+    /**
+     * 删除一行
+     * @method handleDelete
+     * @param {object} scope 整行对象
+     */
+    handleDelete(scope) {
+      this.configInfoDetailList.splice(scope.$index, 1)
+    },
+
+    /**
+     * 查询配置字段列表
+     * @method findContractFieldByParentId
+     * @param {object} scope 行对象
+     */
+    findContractFieldByParentId(scope) {
+      if (!scope.row.id) {
+        this.$message({
+          message: '请先保存',
+          type: 'warning'
+        })
+        return
+      }
+      // this.fieldConfigFlag = true
+      // this.parentId = scope.row.id
+      // this.$refs.fieldConfig && this.$refs.fieldConfig.query(scope.row.id)
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.custom-fields {
+  .mt-10 {
+    margin-top: 10px;
+  }
+  .el-select__tags {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .el-select .el-tag {
+    display: inline;
+  }
+}
+</style>