olp-table 5.3.1 → 5.3.4

package/src/views/tree/components/config-core-tree/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <el-divider content-position="left">常用属性</el-divider>
+  <el-form ref="formRef" :model="$attrs.formData" class="form-inline" :rules="rules" inline label-width="100px"
+           labelAlign="label-right-align" @submit.prevent>
+    <el-form-item label="首次全展开" prop="firstExpandAll" v-if="$attrs.formData.lazy == 0">
+      <el-switch active-value="1" inactive-value="0" v-model="$attrs.formData.firstExpandAll"/>
+    </el-form-item>
+    <el-form-item label="搜索框" prop="search">
+      <el-switch active-value="1" inactive-value="0" v-model="$attrs.formData.search"/>
+    </el-form-item>
+    <el-form-item label="首次自动查询" prop="autoInit">
+      <el-switch active-value="1" inactive-value="0" v-model="$attrs.formData.autoInit"/>
+    </el-form-item>
+    <el-form-item label="转换树形" prop="convertTree">
+      <el-switch active-value="1" inactive-value="0" @change="updateConvertTree" v-model="$attrs.formData.convertTree"/>
+    </el-form-item>
+    <el-form-item label="显示选择框" prop="convertTree">
+      <el-switch active-value="1" inactive-value="0" v-model="$attrs.formData.showCheckbox"/>
+    </el-form-item>
+    <el-form-item label="lazy" prop="lazy">
+      <el-switch active-value="1" inactive-value="0" v-model="$attrs.formData.lazy"/>
+    </el-form-item>
+    <el-form-item label="首次lazy值" prop="firstLazyValue" :label-width="125" v-if="$attrs.formData.lazy == 1">
+      <el-input v-model="$attrs.formData.firstLazyValue" type="text" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="标题" prop="title">
+      <el-input v-model="$attrs.formData.title" type="text" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="树操作栏" prop="treeOper">
+      <ol-dict-tag v-model="$attrs.formData.treeOper" @change="updateBtn" border type="checkbox" code="tree_oper"/>
+    </el-form-item>
+
+    <el-form-item label="树ID" prop="treeId" v-if="$attrs.formData.convertTree == 1">
+      <el-input v-model="$attrs.formData.treeId" type="text" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="树列父ID" prop="treeParentId" v-if="$attrs.formData.convertTree == 1">
+      <el-input v-model="$attrs.formData.treeParentId" type="text" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="label" prop="label">
+      <el-input v-model="$attrs.formData.label"></el-input>
+    </el-form-item>
+    <el-form-item label="value" prop="value">
+      <el-input v-model="$attrs.formData.value"></el-input>
+    </el-form-item>
+    <el-form-item label="width" prop="width">
+      <el-input-number v-model="$attrs.formData.width"></el-input-number>
+    </el-form-item>
+    <el-form-item label="单击传递table参数" label-width="140" prop="tableQueryParams">
+      <el-input v-model="$attrs.formData.tableQueryParams"></el-input>
+    </el-form-item>
+    <!--    <el-form-item label="展开图标" prop="expandIcon">
+          <el-input v-model="$attrs.formData.expandIcon" type="text" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="收缩图标" prop="drawIcon">
+          <el-input v-model="$attrs.formData.drawIcon" type="text" clearable></el-input>
+        </el-form-item>-->
+  </el-form>
+  <el-divider content-position="left">详情配置</el-divider>
+  <el-tabs
+      v-model="activeName"
+      type="card"
+  >
+    <el-tab-pane label="属性" name="Option">
+      <OptionConfig ref="option" :data-source="Option" :default-data="$attrs.formData.optionValue"></OptionConfig>
+    </el-tab-pane>
+    <el-tab-pane label="prop" name="prop">
+      <OptionConfig ref="prop" :data-source="Prop" :default-data="$attrs.formData.propValue"></OptionConfig>
+    </el-tab-pane>
+    <el-tab-pane label="事件" name="events">
+      <OptionConfig ref="events" :data-source="Events" :default-data="$attrs.formData.eventsValue"></OptionConfig>
+    </el-tab-pane>
+    <el-tab-pane lazy label="操作按钮" name="operationButOptions">
+      <btn-config ref="operationButOptions" @updateValue="updateValue" :data="treeConfigAll.toolButOptions"
+                  type="operationButOptions"/>
+    </el-tab-pane>
+  </el-tabs>
+
+</template>
+
+<script>
+import OptionConfig from "@/views/components/option-config/index.vue";
+import option from "@/views/tree/components/config-core-tree/data/option";
+import prop from "@/views/tree/components/config-core-tree/data/prop";
+import event from "@/views/tree/components/config-core-tree/data/events";
+import BtnConfig from "@/views/components/btn-config/index.vue";
+
+export default {
+  name: 'configCoreTree',
+  components: {BtnConfig, OptionConfig},
+  inject: ['treeConfigAll'],
+  data() {
+    return {
+      rules: {
+        tableQueryParams: [
+          {required: true, message: '请输入table参数', trigger: 'blur'},
+        ],
+        firstLazyValue: [
+          {required: true, message: '请输入首次lazy值', trigger: 'blur'},
+        ],
+        label: [
+          {required: true, message: '请输入label', trigger: 'blur'},
+        ],
+        value: [
+          {required: true, message: '请输入value', trigger: 'blur'},
+        ],
+        width: [
+          {required: true, message: '请输入width', trigger: 'blur'},
+        ],
+      },
+      Option: JSON.parse(JSON.stringify(option)),
+      Prop: JSON.parse(JSON.stringify(prop)),
+      Events: JSON.parse(JSON.stringify(event)),
+      operationButOptions: [],
+      btns: {
+        'add': 'vxe-icon-add',
+        'edit': 'vxe-icon-edit',
+        'delete': 'vxe-icon-delete-fill'
+      },
+      activeName: 'Option',
+    }
+  },
+  methods: {
+    updateConvertTree() {
+      this.$nextTick(() => {
+        if (this.$attrs.formData.convertTree == 1) {
+          this.rules['treeParentId'] = [
+            {required: true, message: '请输入树列父ID', trigger: 'blur'},
+          ];
+          this.rules['treeId'] = [
+            {required: true, message: '请输入树ID', trigger: 'blur'},
+          ];
+        } else {
+          delete this.rules['treeParentId'];
+          delete this.rules['treeId'];
+        }
+      })
+    },
+    updateBtn(dataBtn) {
+      next:for (let btn of Object.keys(this.btns)) {
+        for (let i = 0; i < this.treeConfigAll.toolButOptions.length; i++) {
+          if (this.treeConfigAll.toolButOptions[i].code == btn) {
+            if (dataBtn.indexOf(btn) == -1) {
+              this.treeConfigAll.toolButOptions.splice(i, 1);
+              continue next;
+            } else if (dataBtn.indexOf(btn) != -1) {
+              continue next;
+            }
+          }
+        }
+        if (dataBtn.indexOf(btn) != -1) {
+          this.treeConfigAll.toolButOptions.push({
+            icon: this.btns[btn],
+            code: btn,
+            defaultShow: '1',
+            clickCallBackMethod: btn + 'ButClick',
+            status: btn == 'delete' ? 'danger' : 'primary',
+            deleted: 0,
+            seq: this.treeConfigAll.toolButOptions.length + 1,
+            sort: this.treeConfigAll.toolButOptions.length
+          })
+        }
+      }
+      let sort = 0;
+      for (const toolButOptions of this.treeConfigAll.toolButOptions) {
+        sort++;
+        toolButOptions.sort = sort;
+      }
+    },
+    updateValue(dataBtn) {
+      this.$attrs.formData.treeOper = dataBtn;
+    },
+  }, created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-inline {
+
+}
+</style>

package/src/views/tree/components/config-core.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-tabs v-model="activeName" style="height: calc(100vh - 180px)" @tab-click="setFormConfigData">
+    <el-tab-pane label="数据配置" name="data">
+      <config-core-data ref="data" :formData="treeConfigAll.treeConfig" @syncTable="syncTable"></config-core-data>
+    </el-tab-pane>
+    <el-tab-pane label="tree配置" name="tree">
+      <config-core-tree ref="tree" :formData="treeConfigAll.treeConfig"></config-core-tree>
+    </el-tab-pane>
+    <el-tab-pane label="新增表单配置" name="add" v-if="treeConfigAll.treeConfig.treeOper.includes('add')">
+      <FormConfig type="add" ref="addFormConfig" />
+    </el-tab-pane>
+    <el-tab-pane label="编辑表单配置" name="edit" v-if="treeConfigAll.treeConfig.treeOper.includes('edit')">
+      <FormConfig type="edit" ref="editFormConfig"/>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+import ConfigCoreData from "@/views/tree/components/config-core-data.vue";
+import ConfigCoreTree from "@/views/tree/components/config-core-tree/index.vue";
+import FormConfig from "@/views/table/add-or-edit/config/form-config/index.vue";
+// import FormConfig from "@/views/tree/components/form-config/index.vue";
+
+export default {
+  name: "configCode",
+  components: {FormConfig, ConfigCoreData, ConfigCoreTree},
+  props:{
+    syncTable:{},
+    setFormConfigData: {},
+    syncFormConfig: {}
+  },
+  inject: ['treeConfigAll'],
+  data() {
+    return {
+      activeName: 'data',
+      loading: false,
+    }
+  },
+  methods:{
+
+  }
+}
+</script>