olp-table 5.3.4 → 5.3.5

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

@@ -1,333 +0,0 @@
-<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>