olp-table 5.3.1 → 5.3.4

package/src/views/table/add-or-edit/config/base-config/table-form.vue

@@ -0,0 +1,333 @@
+<template>
+  <el-form :model="configData.form"
+           label-position="right"
+           label-width="100px"
+           ref="formRef"
+           class="el-form-globals">
+    <el-row>
+      <el-col :xs="24" :sm="12" :md="12" :lg="3">
+        <el-form-item label="序号:" prop="seq">
+          <el-switch v-model="configData.form.seq"
+                     @change="seqChange"
+                     inline-prompt
+                     active-value="1"
+                     inactive-value="0"
+                     active-icon="Check"
+                     inactive-icon="Close"/>
+        </el-form-item>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="12" :lg="6">
+        <el-form-item label="表格选择框:" prop="selectBox">
+          <el-radio-group v-model="configData.form.selectBox">
+            <el-radio border v-for="(item, index) in selectBoxOptions" :key="index" :label="item.value" :value="item.value" style="{display: inline}">{{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="12" :lg="9">
+        <el-form-item label="左工具栏按钮:" prop="toolBut">
+          <el-checkbox-group v-model="configData.form.toolBut" @change="updateBtn('toolBut')">
+            <el-checkbox border v-for="(item, index) in configData.toolButConfig.filter(o=>o.alignMode == 'left')" :key="index" :value="item.code" :label="item.code"
+                         :disabled="item.disabled" style="{display: inline;margin-right: 10px;}">{{ item.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="12" :lg="6">
+        <el-form-item label="表格操作栏:" prop="operationBut">
+          <el-checkbox-group v-model="configData.form.operationBut"  @change="updateBtn('operationBut')">
+            <el-checkbox border v-for="(item, index) in configData.operationButConfig" :key="index" :label="item.code" :value="item.code"
+                         :disabled="item.disabled" style="{display: inline}">{{ item.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :xs="24" :sm="12" :md="12" :lg="3">
+        <el-form-item label="首次自动查询:" prop="init">
+          <el-switch v-model="configData.form.init"
+                     inline-prompt
+                     active-value="1"
+                     inactive-value="0"
+                     active-icon="Check"
+                     inactive-icon="Close"/>
+        </el-form-item>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="12" :lg="6">
+        <el-form-item label="分页\分组:" prop="paging">
+          <el-radio-group v-model="configData.form.paging">
+            <el-radio border v-for="(item, index) in selectBoxPaging" :key="index" :label="item.value" :value="item.value" style="{display: inline}">{{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="7" :lg="9">
+        <el-form-item label="右工具栏按钮:" prop="toolBut">
+          <el-checkbox-group v-model="configData.form.toolBut" @change="updateBtn('toolBut')">
+            <el-checkbox border v-for="(item, index) in configData.toolButConfig.filter(o=>o.alignMode == 'right')" :key="index" :label="item.code" :value="item.code"
+                         :disabled="item.disabled" style="{display: inline;margin-right: 10px;}">{{ item.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="12" :lg="3">
+        <el-form-item label="树表:" prop="tree">
+          <el-switch @change="treeChange" v-model="configData.form.tree"
+                     inline-prompt
+                     active-value="1"
+                     inactive-value="0"
+                     active-icon="Check"
+                     inactive-icon="Close"/>
+        </el-form-item>
+      </el-col>
+      <el-col v-if="show" :xs="24" :sm="12" :md="5" :lg="5">
+        <el-form-item label="树ID:" prop="treeId">
+          <el-select v-model="configData.form.treeId" class="full-width-input" clearable>
+            <el-option v-for="(item, index) in configDataSource.columns" :key="index" :label="item.title"
+                       :value="item.field" :disabled="item.disabled"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col v-if="show" :xs="24" :sm="12" :md="5" :lg="5">
+        <el-form-item label="树列父ID:" prop="treeParentId">
+          <el-select v-model="configData.form.treeParentId" class="full-width-input" clearable>
+            <el-option v-for="(item, index) in configDataSource.columns" :key="index" :label="item.title"
+                       :value="item.field" :disabled="item.disabled"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col v-if="show" :xs="24" :sm="12" :md="5" :lg="5">
+        <el-form-item label="展开列:" prop="openColumn">
+          <el-select v-model="configData.form.openColumn" class="full-width-input" clearable>
+            <el-option v-for="(item, index) in configDataSource.columns" :key="index" :label="item.title"
+                       :value="item.field" :disabled="item.disabled"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+
+</template>
+
+<script>
+import {
+  defineComponent,
+  toRefs,
+  reactive,
+  getCurrentInstance, inject, nextTick,  onMounted
+}
+  from 'vue'
+
+export default defineComponent({
+  name: 'tableForm',
+  components: {},
+  setup() {
+    const configData = inject("configData")
+    const updateBtn = inject('updateBtn', Function, true)
+    const state = reactive({
+      show: configData.form.tree == '1',
+      formData: {
+        paging: false,
+        seq: null,
+        selectBox: null,
+        toolBut: [],
+        init: false,
+        tree: false,
+        operationBut: [],
+      },
+      rules: {},
+      selectBoxPaging: [
+        {
+          label: '分页',
+          value: '1',
+        }, {
+          label: '不分页',
+          value: '0'
+        }, {
+          label: '分组',
+          value: '2'
+        }],
+      selectBoxOptions: [
+        {
+          label: '多选',
+          value: '2',
+        }, {
+          label: '单选',
+          value: '1'
+        }, {
+          label: '无',
+          value: '0'
+        }],
+    })
+    const configDataSource = reactive({
+      toolButConfig: [],
+      operationButConfig: [],
+      show: false,
+      columns: [],
+    })
+    const treeChange = (val) => {
+      state.show = val == '1'
+      if (val == '1') {
+        initColumn()
+      }
+    }
+    const seqChange = (val) => {
+      if (val == '1') {
+        initColumn()
+      }
+    }
+    const setData = (data) => {
+
+    }
+    const initColumn = (c) => {
+      configDataSource.columns.length = 0
+      if (configData.form.seq == '1') {
+        let column = {
+          type: "seq",
+          field: 'seq',
+          width: 60,
+          title: "序号",
+        }
+        configDataSource.columns.push(column);
+      }
+      for (let column of JSON.parse(JSON.stringify(configData.tableColumn))) {
+        configDataSource.columns.push(column)
+      }
+      if (c && !configData.form['openColumn']) {
+        nextTick(() => {
+          configData.form['openColumn'] = configData.form['treeId']
+        })
+      }
+    }
+    // 初始化
+    const init = () => {
+      initColumn()
+    }
+    const instance = getCurrentInstance()
+    const submitForm = () => {
+      instance.proxy.$refs['vForm'].validate(valid => {
+        if (!valid) return
+        //TODO: 提交表单
+      })
+    }
+    const resetForm = () => {
+      instance.proxy.$refs['vForm'].resetFields()
+    }
+    onMounted(()=>{
+      init();
+    })
+    return {
+      ...toRefs(state),
+      submitForm,
+      resetForm,
+      treeChange,
+      seqChange,
+      init,
+      setData,
+      initColumn,
+      configData,
+      configDataSource,
+      updateBtn
+    }
+  }
+})
+
+</script>
+
+<style lang="scss">
+.el-input-number.full-width-input,
+.el-cascader.full-width-input {
+  width: 100% !important;
+}
+
+.el-form-item--medium {
+  .el-radio {
+    line-height: 36px !important;
+  }
+
+  .el-rate {
+    margin-top: 8px;
+  }
+}
+
+.el-form-item--small {
+  .el-radio {
+    line-height: 32px !important;
+  }
+
+  .el-rate {
+    margin-top: 6px;
+  }
+}
+
+.el-form-item--mini {
+  .el-radio {
+    line-height: 28px !important;
+  }
+
+  .el-rate {
+    margin-top: 4px;
+  }
+}
+
+.clear-fix:before,
+.clear-fix:after {
+  display: table;
+  content: "";
+}
+
+.clear-fix:after {
+  clear: both;
+}
+
+.float-right {
+  float: right;
+}
+
+</style>
+
+<style lang="scss" scoped>
+div.table-container {
+  table.table-layout {
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+
+    td.table-cell {
+      display: table-cell;
+      height: 36px;
+      border: 1px solid #e1e2e3;
+    }
+  }
+}
+
+div.tab-container {
+}
+
+.label-left-align :deep(.el-form-item__label) {
+  text-align: left;
+}
+
+.label-center-align :deep(.el-form-item__label) {
+  text-align: center;
+}
+
+.label-right-align :deep(.el-form-item__label) {
+  text-align: right;
+}
+
+.custom-label {
+}
+
+.static-content-item {
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+
+  :deep(.el-divider--horizontal) {
+    margin: 0;
+  }
+}
+
+</style>