lshcomment 1.0.0

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

@@ -0,0 +1,313 @@
+<template>
+  <div class="custom-fields">
+    <el-table
+      :data="configInfoDetailList"
+      border
+      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
+        label="字段名称"
+        align="center"
+        show-overflow-tooltip
+        min-width="140">
+        <template slot-scope="scope">
+          <el-input v-model.trim="scope.row.columnName" disabled/>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="字段类型"
+        align="center"
+        show-overflow-tooltip
+        min-width="140">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.columnType" @change="handleChange(scope)" disabled>
+            <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
+        label="选项值(竖线分隔)"
+        align="center"
+        show-overflow-tooltip
+        min-width="140">
+        <template slot-scope="scope">
+          <template v-if="scope.row.columnType === 1 || scope.row.columnType === 2">
+            <el-tooltip class="item" effect="dark" :content="scope.row.optionValue" placement="top">
+              <el-input v-model.trim="scope.row.optionValue" @keyup.native="optionKeyup" @blur="handleBlur(scope)" :disabled="readload"/>
+            </el-tooltip>
+          </template>
+
+          <template v-if="scope.row.columnType === 3">
+            <el-select v-model="scope.row.optionValue" disabled>
+              <el-option
+                v-for="item in formatDateType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"/>
+            </el-select>
+          </template>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="字段默认值"
+        align="center"
+        show-overflow-tooltip
+        min-width="160">
+        <template slot-scope="scope">
+          <template v-if="scope.row.columnType == 0">
+            <el-tooltip class="item" effect="dark" :content="scope.row.columnValue" placement="top">
+              <el-input v-model.trim="scope.row.columnValue" auto-complete="off" :disabled="readload"/>
+            </el-tooltip>
+          </template>
+
+          <template v-else-if="scope.row.columnType == 1">
+            <el-select v-model="scope.row.columnValue" :disabled="readload">
+              <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.columnType == 2">
+            <el-tooltip :content="scope.row.columnValue.toString()" placement="top">
+              <el-select multiple v-model="scope.row.columnValue" :disabled="readload">
+                <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>
+            <el-select key="dateSelect" v-model="scope.row.columnValue" :disabled="readload">
+              <el-option
+                v-for="item in dateType"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"/>
+            </el-select>
+          </template>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="字段参数"
+        align="center"
+        show-overflow-tooltip
+        prop="columnStandard"
+        min-width="140"/>
+
+      <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)" :disabled="readload">删除</b-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <b-button 
+      v-if="isCustom"
+      size="sm" variant="primary"
+      class="mt-10" @click="handleAdd" :disabled="readload">
+      添加
+    </b-button>
+
+    <slot name="btns" :list="configInfoDetailList"></slot>
+  </div>
+</template>
+
+<script>
+/**
+ * @description 自定义字段组件
+ * @author lavn
+ * @date 2020-06-11
+ */
+export default {
+  props: {
+    configDetailList: {
+      type: Array,
+      default: () => []
+    },
+    isCustom: {
+      type: Boolean,
+      default: false,
+    },
+    readload: {
+      type: Boolean,
+      default: false,
+    }
+  },
+
+  data() {
+    return {
+      configInfoDetailList: [],    // 配置字段信息
+      filterList: [],              // isShow === 0
+      columnTypeOptions: [
+        {
+          value: 0,
+          label: '文本'
+        },
+        {
+          value: 1,
+          label: '单选'
+        },
+        {
+          value: 2,
+          label: '多选'
+        },
+        {
+          value: 3,
+          label: '日期'
+        }
+      ],
+      formatDateType: [
+        // {
+        //   value: '0',
+        //   label: 'YYYY年M月D'
+        // }, 
+        {
+          value: '1',
+          label: 'YYYY-MM-DD'
+        }
+      ],
+      dateType: [
+        {
+          value: '0',
+          label: '默认为空'
+        }, 
+        {
+          value: '1',
+          label: '当前时间'
+        }
+      ],
+    }
+  },
+
+  watch: {
+    configDetailList: {
+      handler(newVal, oldVal) {
+        newVal.map(item => {
+          let arr = item.optionValue.split('|')
+      
+          let fieldOptions = arr.map(item => {
+            return {label: item, value: item}
+          })
+          item.fieldOptions = fieldOptions
+        })
+        this.configInfoDetailList = newVal
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+
+    /**
+     * 字段类型修改
+     * @method handleChange
+     * @param {object} scope 整行对象
+     */
+    handleChange(scope) {
+      this.$set(scope.row, 'optionValue', '')
+      this.$set(scope.row, 'columnValue', '')
+      scope.row.columnType == 1 && this.$set(scope.row, 'fieldOptions', [])
+      scope.row.columnType == 2 && this.$set(scope.row, 'fieldOptions', [])
+      scope.row.columnType == 2 && this.$set(scope.row, 'columnValue', [])
+    },
+
+    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.optionValue.split('|')
+      let fieldOptions = []
+      arr.forEach(item => {
+        item && fieldOptions.push({label: item, value: item})
+      })
+      this.$set(scope.row, 'columnValue', arr[0])
+      this.$set(this.configInfoDetailList[scope.$index], 'fieldOptions', fieldOptions)
+      scope.row.columnType === 2 ? this.$set(scope.row, 'columnValue', []) : this.$set(scope.row, 'columnValue', '')
+    },
+
+    /**
+     * 增加一行
+     * @method handleAdd
+     */
+    handleAdd() {
+      let item = {
+        columnName:'',
+        columnType: 0,
+        optionValue: null,
+        columnValue:'',
+        columnStandard:'',
+        // multipleColumnValue: '',
+      }
+      this.configInfoDetailList.push(item)
+    },
+
+    /**
+     * 删除一行
+     * @method handleDelete
+     * @param {object} scope 整行对象
+     */
+    handleDelete(scope) {
+      this.configInfoDetailList.splice(scope.$index, 1)
+    },
+  }
+}
+</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>