@bytenew/bn-bus-ui 1.1.461 → 1.1.463

package/packages/BnColumnConfig/data.js

@@ -0,0 +1,129 @@
+// 组件类型
+export const columnTypeMap = {
+    1: '单行文本',
+    2: '数值',
+    3: '单选',
+    4: '下拉',
+    5: '多选',
+    6: '单选联动',
+    7: '日期',
+    8: '日期区间',
+    9: '评分',
+    10: '附件',
+    11: '富文本',
+    12: '标签',
+    13: '子表单',
+    14: '地址',
+    15: '收寄信息',
+    17: '关联查询',
+    18: '描述',
+    20: '多选联动'
+}
+// 组件类型
+export const columnTypes = [
+    {
+        title: "单行文本",
+        id: 1,
+        defaultInfo: "",
+        moduleDefinition: ""
+    },
+    {
+        title: "数值",
+        id: 2,
+        defaultInfo: "",
+        moduleDefinition: ""
+
+    },
+    {
+        title: "单选",
+        id: 3,
+        defaultInfo: {},
+        moduleDefinition: []
+
+    },
+    {
+        title: "下拉",
+        id: 4,
+        defaultInfo: {},
+        moduleDefinition: []
+
+    },
+    {
+        title: "多选",
+        id: 5,
+        defaultInfo: [],
+        moduleDefinition: []
+
+
+    },
+    {
+        title: "单选联动",
+        id: 6,
+        defaultInfo: [],
+        moduleDefinition: {
+            optionList: [],
+            header: [],
+        },
+
+    },
+    // {
+    //     title: "多选联动",
+    //     id: 20,
+    //     defaultInfo: [],
+    //     moduleDefinition: {
+    //         optionList: [],
+    //         header: [],
+    //     },
+    // },
+    {
+        title: "日期",
+        id: 7,
+        defaultInfo: '',
+        moduleDefinition: []
+
+
+    },
+    {
+        title: "日期区间",
+        id: 8,
+        defaultInfo: [],
+        moduleDefinition: []
+
+    },
+    // {
+    //     title: '评分',
+    //     id: 9,
+    //     defaultInfo: ''
+    // },
+    {
+        title: "附件",
+        id: 10,
+        defaultInfo: '',
+        moduleDefinition: ''
+
+    },
+    // {
+    //     title: '地址',
+    //     id: 14
+    // },
+    // {
+    //     title: '收寄信息',
+    //     id: 15
+    // },
+]
+
+export const columnData = {
+    "behaviorType": '',
+    "name": "",
+    "extraInfo": {
+        isAddable: '1',
+        isEditable: '1',
+        isDisplayed: '1',
+        valueEmptyCheck: '0',
+        // 子表单关联筛选时
+        subSearchColumns: []
+    },
+    "moduleDefinition": [],
+    "value": "",
+    "defaultInfo": ""
+}

package/packages/BnColumnConfig/index.scss

@@ -0,0 +1,23 @@
+.columnConfig{
+    position: relative;
+    width: 100%;
+    padding: 0 10px 0 0;
+    &-item{
+        position: relative;
+        width: 100%;
+        margin-bottom: 8px;
+        &-top{
+            height: 32px;
+            font-size: 14px;
+            &-title{
+                font-weight: 500;
+                span{
+                    color: #606266;
+                }
+            }
+            &-opt{
+                height: 32px;
+            }
+        }
+    }
+}

package/packages/BnColumnConfig/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="columnConfig">
+    <funcExprDialog ref="funcExpr" v-model="columnInfo" :extendPost="extendPost" :postFunc="postFunc"
+                    @saveOver="saveFunc" :componentList="columnList"/>
+    <setRelationOption ref="setRelationOption" :columnData="columnInfo" :extendPost="extendPost"
+                       :postFunc="postFunc" @confirm="saveRelationOpt"/>
+    <el-row :gutter="20">
+      <el-col :span="24/row">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">标题</div>
+            <div class="w-color-purple w-font12" v-if="columnInfo.behaviorType">
+              {{ columnInfo.behaviorType == 5 && columnInfo.extraInfo?.valueType == 'select' ?
+                '下拉多选' : columnTypeMap[columnInfo.behaviorType] }}
+            </div>
+          </div>
+          <div class="column-item-body">
+            <el-input v-model="columnInfo.name" placeholder="设置组件标题" clearable
+                      :disabled="disabled || hideFiled.includes('name')" :maxlength="columnInfo.id?100:10" show-word-limit/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24/row" v-if="!hideFiled.includes('behaviorType') && !columnInfo.id">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">类型</div>
+          </div>
+          <div class="column-item-body">
+            <BnSelect v-model="columnInfo.behaviorType" :options="columnTypes" @change="changeType"
+                      :label-in-value="false" :placeholder="'设置组件类型'" clearable filterable></BnSelect>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24/row"
+              v-if="!hideFiled.includes('default') && [1,2,3,4,5,6,7,8].includes(columnInfo.behaviorType)">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">默认值</div>
+            <div class="columnConfig-item-top-opt">
+              <BnDrop v-model="defaultType" :options="[{id:'1',title:'自定义'},{id:'2',title:'函数表达式'}]"
+                      @change="changeDefaultType"
+                      v-if="[1,2].includes(columnInfo.behaviorType)" :placement="'bottom-end'" :labelInValue="false"
+                      :disabled="disabled"/>
+            </div>
+          </div>
+          <div class="column-item-body">
+            <defaultSet v-model="columnInfo" :disabled="disabled" :postFunc="postFunc" :columnList="columnList"
+                        v-if="defaultType == 1" :extendPost="extendPost" :defaultType="defaultType"></defaultSet>
+            <el-input v-if="defaultType == 2" disabled v-model="exprDisplay"
+                      placeholder="点击右侧按钮设置函数表达式">
+              <template #append>
+                <el-tooltip class="box-item" effect="dark" content="设置函数表达式，组件值最终取函数计算的结果"
+                            :show-after="600"
+                            placement="top">
+                  <el-button @click="$refs.funcExpr.open()">
+                    <span class="bnUIcon bnUIcon-exprExec w-color-purple"></span>
+                  </el-button>
+                </el-tooltip>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24/row" v-if="!isChildren && !hideFiled.includes('defaultCover') && [1,2,3,4,5,6,7,8].includes(columnInfo.behaviorType) && columnInfo.extraInfo.searchKey != 2">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center">
+            <div class="columnConfig-item-top-title">创建时以默认值为准</div>
+            <div class="w-padding-top2 w-padding-left4 w-cursor-pointer">
+              <el-popover content="勾选后，在创建工单时，当你通过订单号或ERP单号查询原单数据时，将不取原单数据而以设置的组件默认值填充。" width="230" placement="top-start">
+                <template #reference>
+                  <span class="bnUIcon bnUIcon-question w-color-blue"></span>
+                </template>
+              </el-popover>
+              </div>
+          </div>
+          <div class="column-item-body w-flex-center" style="height: 32px">
+            <BnCheck v-model="columnInfo.extraInfo.defaultCover" :true-data="1" :false-data="0" :label="'是'"/>
+            <BnCheck v-model="columnInfo.extraInfo.defaultCover" :true-data="0" :false-data="1" :label="'否'"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24/row" v-if="!hideFiled.includes('isAddable')">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">新建时 <span class="w-font12">(不勾选则不可见)</span></div>
+          </div>
+          <div class="column-item-body w-flex-center" style="height: 32px">
+            <BnCheck v-model="columnInfo.extraInfo.isAddable" :true-data="'1'" :false-data="'0'" :label="'可见'"/>
+            <BnCheck v-model="columnInfo.extraInfo.valueAddable" :true-data="'1'" :false-data="'0'" :label="'禁用'"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24/row" v-if="!hideFiled.includes('isEditable')">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">编辑时 <span class="w-font12">(不勾选则不可见)</span></div>
+          </div>
+          <div class="column-item-body w-flex-center" style="height: 32px">
+            <BnCheck v-model="columnInfo.extraInfo.isEditable" :true-data="'1'" :false-data="'0'" :label="'可见'"/>
+            <BnCheck v-model="columnInfo.extraInfo.valueEditable" :true-data="'1'" :false-data="'0'" :label="'禁用'"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24/row" v-if="!hideFiled.includes('valueEmptyCheck')">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">校验 <span class="w-font12">(对值进行校验)</span></div>
+          </div>
+          <div class="column-item-body w-flex-center" style="height: 32px">
+            <BnCheck v-model="columnInfo.extraInfo.valueEmptyCheck" :true-data="'1'" :false-data="'0'" :label="'必填'"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24/row" v-if="!hideFiled.includes('multiplePackagesType') && (dataBack?.key == columnInfo.columnCode || columnInfo.behaviorType == 13)">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">数据回填</div>
+          </div>
+          <div class="column-item-body w-flex-center" style="height: 32px">
+            <el-select v-model="columnInfo.extraInfo.multiplePackagesType" clearable>
+              <el-option label="默认回填第一个（子表单）" :value="1"></el-option>
+              <el-option label="默认回填全部（子表单全选）" :value="2"></el-option>
+              <el-option label="默认不回填（所有组件）" :value="3"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24/row" v-if="(!hideFiled.includes('moduleDefinition') || columnInfo.extraInfo.fixedOption === 0) && [6,20].includes(columnInfo.behaviorType)">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">选项配置</div>
+          </div>
+          <div class="column-item-body w-flex-center" style="height: 32px">
+            <el-button class="w-default-wrap w-flex-center" @click="$refs.setRelationOption.open(columnInfo)">
+              <span v-if="columnInfo?.moduleDefinition?.optionList?.length">
+                <span class="bnUIcon bnUIcon-smile w-color-green-min"></span>
+                已设置
+              </span>
+              <span v-else>点击设置</span>
+            </el-button>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24" v-if="(!hideFiled.includes('moduleDefinition') || columnInfo.extraInfo.fixedOption === 0) && [3,4,5].includes(columnInfo.behaviorType)">
+        <div class="columnConfig-item">
+          <setOption :columnData="columnInfo" :extendPost="extendPost" :postFunc="postFunc" :openDataField="openDataField"></setOption>
+        </div>
+      </el-col>
+      <el-col :span="24" v-if="columnInfo.behaviorType == 13">
+        <div class="columnConfig-item">
+          <childrenFormSetting :columnData="columnInfo" v-bind="$props"></childrenFormSetting>
+        </div>
+      </el-col>
+      <el-col :span="24" v-if="!hideFiled.includes('paraExplain') && !isChildren">
+        <div class="columnConfig-item">
+          <div class="columnConfig-item-top w-flex-center w-flex-between">
+            <div class="columnConfig-item-top-title">填写说明 <span class="w-font12">(展示在组件下方)</span></div>
+          </div>
+          <div class="column-item-body w-flex-center">
+            <paraExplainSet :columnData="columnInfo" :extendPost="extendPost" :postFunc="postFunc"></paraExplainSet>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24" v-if="columnInfo.extraInfo?.filterColumn && columnInfo.extraInfo?.filterColumn.length">
+        <div class="columnConfig-item">
+          <packageFilter :columnData="columnInfo" v-bind="$props"></packageFilter>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import {defineAsyncComponent} from 'vue';
+import {cloneDeep} from "lodash";
+import {columnTypeMap, columnTypes} from "./data.js";
+
+export default {
+  name: "BnColumnConfig",
+  props: {
+    //最终选中的value
+    modelValue: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 列数
+    row: {
+      default: 1
+    },
+    // 需要隐藏的配置根据字段来
+    hideFiled: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    // 组件列表
+    columnList: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    // 是否禁用
+    disabled: Boolean,
+    // 是否开启数据字典配置
+    openDataField: Boolean,
+    postFunc: Function,
+    extendPost: Object,
+    // 多包裹数据回填
+    dataBack: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 是否是子表单配置子组件
+    isChildren:Boolean
+  },
+  components: {
+    paraExplainSet: defineAsyncComponent(() => import("./component/paraExplainSet/index.vue")),
+    defaultSet: defineAsyncComponent(() => import("./component/defaultSet/defaultSet.vue")),
+    funcExprDialog: defineAsyncComponent(() => import('./component/funcExprDialog/funcExprDialog.vue')),
+    setOption: defineAsyncComponent(() => import("./component/setOption/setOption.vue")),
+    setRelationOption: defineAsyncComponent(() => import("./component/setRelationOption/setRelationOption.vue")),
+    childrenFormSetting: defineAsyncComponent(() => import("./component/childrenFormSetting/index.vue")),
+    packageFilter: defineAsyncComponent(() => import("./component/packageFilter/index.vue"))
+  },
+  data() {
+    return {
+      columnTypes,
+      columnTypeMap,
+      // 默认值类型
+      defaultType: '1',
+      exprDisplay: ''
+    }
+  },
+  created() {
+    if (this.modelValue.extraInfo?.exprId) {
+      this.postFunc(`/expr/query/${this.modelValue.extraInfo.exprId}`, null, 'get').then(res => {
+        if (!res.code) {
+          this.exprDisplay = res.data.exprDisplay;
+        }
+      })
+    }
+  },
+  methods: {
+    /**
+     * 切换默认值类型
+     * */
+    changeDefaultType() {
+      if (this.defaultType == '1') {
+        this.columnInfo.extraInfo.exprId = '';
+        this.columnInfo.extraInfo.exprExec = '';
+        this.exprDisplay = '';
+      } else {
+        this.columnInfo.defaultInfo = cloneDeep(this.columnInfo.value);
+        this.columnInfo.extraInfo.defaultInfoRuleCols = [];
+        this.columnInfo.extraInfo.defaultInfoWithCode = '';
+        this.columnInfo.extraInfo.defaultInfoWithId = '';
+      }
+    },
+    /**
+     * 切换组件类型
+     * */
+    changeType() {
+      let findTypeData = this.columnTypes.find(i => i.id == this.columnInfo.behaviorType);
+      if (findTypeData) {
+        this.columnInfo.defaultInfo = cloneDeep(findTypeData.defaultInfo);
+        this.columnInfo.moduleDefinition = cloneDeep(findTypeData.moduleDefinition);
+      }
+      if (![1, 2].includes(this.columnInfo.behaviorType)) {
+        this.defaultType = '1'
+        this.columnInfo.extraInfo.exprId = '';
+        this.columnInfo.extraInfo.exprExec = '';
+        this.exprDisplay = '';
+      }
+    },
+    saveFunc(data) {
+      this.exprDisplay = data;
+    },
+    saveRelationOpt(column) {
+      this.columnInfo.moduleDefinition = cloneDeep(column.moduleDefinition)
+    }
+  },
+  computed: {
+    columnInfo: {
+      get() {
+        try {
+          if (this.modelValue.extraInfo?.exprId) {
+            this.defaultType = '2'
+          }
+        } catch (e) {
+          console.log(e)
+        }
+        return this.modelValue;
+      },
+      set(val) {
+        this.$emit("update:modelValue", val);
+      },
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@use "index";
+</style>

package/packages/BnCondVal/BnCondVal.vue

@@ -0,0 +1,112 @@
+<template>
+  <component :is="checkFilter()" v-model="val" :optionProps="optionProps"
+			 :columnInfo="columnInfo" :postFunc="postFunc" :otherColumns="otherColumns"
+			 :pathUrl="columnInfo.pathUrl" :postData="columnInfo.postData"></component>
+</template>
+<script>
+  import stringVal from './itemVal/stringVal.vue'
+  import numVal from './itemVal/numVal.vue'
+  import numRegVal from './itemVal/numRegVal.vue'
+  import selectVal from './itemVal/selectVal.vue'
+  import dateVal from './itemVal/dateVal.vue'
+  import dateRegVal from "./itemVal/dateRegVal.vue";
+  import relationVal from './itemVal/relationVal.vue'
+  import selectColumnVal from "./itemVal/selectColumnVal.vue";
+  
+  export default {
+	name: "BnCondVal",
+	props: {
+	  modelValue: Object,
+	  optionProps: Object,
+	  columnInfo: Object,
+	  otherColumns: Array,
+	  postFunc: Function,
+	},
+	components: {
+	  stringVal,
+	  numVal,
+	  numRegVal,
+	  selectVal,
+	  dateVal,
+	  dateRegVal,
+	  relationVal,
+	  selectColumnVal
+	},
+	methods: {
+	  /**
+	   * 判断渲染那个组件
+	   * */
+	  checkFilter() {
+		if (this.optionProps.valueType && this.modelValue[this.optionProps.valueType] == '1') {
+		  return 'selectColumnVal'
+		}
+		let componentName = 'stringVal';
+		switch (this.modelValue.behaviorType) {
+		  case 1:
+		  case 10: {
+			componentName = 'stringVal'
+			break;
+		  }
+		  case 2:
+		  case 9: {
+			componentName = 'numVal'
+			if (this.modelValue[this.optionProps.searchType] == '8') {
+			  componentName = 'numRegVal'
+			} else if (this.modelValue[this.optionProps.searchType] == 5) {
+			  componentName = 'stringVal'
+			}
+			break;
+		  }
+		  case 3:
+		  case 4:
+		  case 5: {
+			componentName = 'selectVal'
+			break;
+		  }
+		  case 7: {
+			componentName = this.modelValue[this.optionProps.searchType] == '8' ? 'dateRegVal' : 'dateVal'
+			if (this.modelValue[this.optionProps.subType]) {
+			  if (['3', '4'].includes(this.modelValue[this.optionProps.subType])) {
+				componentName = this.modelValue[this.optionProps.searchType] == '8' ? 'numRegVal' : 'numVal'
+			  }
+			  if (['1', '2', '0'].includes(this.modelValue[this.optionProps.subType])) {
+				componentName = 'dateVal'
+			  }
+			}
+			break;
+		  }
+		  case 8: {
+			componentName = 'dateRegVal'
+			break;
+		  }
+		  case 6:
+		  case 20: {
+			componentName = 'relationVal'
+			break;
+		  }
+		}
+		return componentName
+	  },
+	  /**
+	   * 输入框change事件
+	   * */
+	  valueChange(val) {
+		this.$emit('onChange', 'relation')
+	  }
+	},
+	computed: {
+	  //拷贝value的值，这样就可以避免直接修改props
+	  val: {
+		get() {
+		  return this.modelValue;
+		},
+		set(val) {
+		  this.$emit("update:modelValue", val);
+		},
+	  }
+	}
+  }
+</script>
+<style scoped>
+
+</style>

package/packages/BnCondVal/itemVal/dateRegVal.vue

@@ -0,0 +1,39 @@
+<template>
+  <BnDatePicker v-model="val[optionProps.value]" @change="change('dateRange')" type="datetimerange"
+				:disabled="[9,10,14,15].includes(parseInt(val[optionProps.searchType]))"
+				range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"/>
+</template>
+
+<script>
+  export default {
+	name: "dateRegVal",
+	props: {
+	  modelValue: Object,
+	  optionProps: Object,
+	},
+	data() {
+	  return {
+		open: false,
+	  }
+	},
+	methods: {
+	  /**
+	   * 输入框change事件
+	   * */
+	  change(val) {
+		this.$emit('onChange', 'string')
+	  }
+	},
+	computed: {
+	  //拷贝value的值，这样就可以避免直接修改props
+	  val: {
+		get() {
+		  return this.modelValue;
+		},
+		set(val) {
+		  this.$emit("update:modelValue", val);
+		},
+	  },
+	}
+  }
+</script>

package/packages/BnCondVal/itemVal/dateVal.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-date-picker style="width: 100%" v-model="val[optionProps.value]" @change="change('dateRange')" type="datetime"
+				:disabled="[9,10,14,15].includes(parseInt(val[optionProps.searchType])) || (val[optionProps.subType] && ['0','1','2'].includes(val[optionProps.subType]))"
+				:format="format" :value-format="format" placeholder="请选择" align="right"/>
+</template>
+
+<script>
+  export default {
+	name: "dateVal",
+	props: {
+	  modelValue: Object,
+	  optionProps: Object,
+	},
+	data() {
+	  return {
+		format: 'YYYY-MM-DD HH:mm:ss',
+	  }
+	},
+	methods: {
+	  /**
+	   * 输入框change事件
+	   * */
+	  change(val) {
+		this.$emit('onChange', 'string')
+	  }
+	},
+	computed: {
+	  //拷贝value的值，这样就可以避免直接修改props
+	  val: {
+		get() {
+		  return this.modelValue;
+		},
+		set(val) {
+		  this.$emit("update:modelValue", val);
+		},
+	  },
+	}
+  }
+</script>