olp-table 5.3.1 → 5.3.4

package/src/views/table/add-or-edit/configOld/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <vxe-modal
+      :show-close="false"
+      width="80%"
+      v-model="show"
+      :title="'编辑配置-'+provides.form.theme"
+      resize
+      :before-hide-method="handleClose" showFooter>
+    <div style="height: 80%">
+      <div style="margin: 10px">
+        <p>
+          <vxe-radio-group v-model="tab.activeName">
+            <vxe-radio label="data" content="数据配置" size="medium"></vxe-radio>
+            <vxe-radio label="table" content="表格配置" size="medium"></vxe-radio>
+            <vxe-radio label="code" content="脚本配置" size="medium"></vxe-radio>
+          </vxe-radio-group>
+        </p>
+      </div>
+      <data-config v-show="tab.activeName == 'data'" ref="dataConfig"/>
+      <table-config v-show="tab.activeName == 'table'" ref="tableConfig" @emits="emits"/>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <vxe-button @click="emits('configClose')">取消</vxe-button>
+        <vxe-button status="primary" @click="saveData"> {{ isAdd ? '保存' : '更新' }}</vxe-button>
+      </span>
+    </template>
+  </vxe-modal>
+</template>
+
+<script setup>
+import {inject, nextTick, provide, reactive, ref, toRaw, watch} from "vue";
+import DataConfig from "@/views/table/add-or-edit/configOld/dataTags/index.vue";
+import TableConfig from "@/views/table/add-or-edit/configOld/tableTags/index.vue";
+import {post, get} from "@/utils/http/httpUtils";
+const http = inject('http')
+const show = ref(true);
+const isAdd = ref(true);
+const dataConfig = ref(null);
+const tableConfig = ref(null);
+const provides = reactive({
+  form: {
+    mainTable: '',
+    hump: '0',
+    definitionSql: '0',
+    executeSql: '',
+    executeWhere: '',
+    paging: '1',
+    selectBox: '2',
+    tips: '1',
+    tree: '0',
+    treeParentId: '',
+    openColumn: '',
+    operationBut: '',
+    tableDelete: {},
+    toolBut: '',
+    parentId: '',
+    theme: ''
+  },
+  tableColumn: []
+})
+const tab = reactive({
+  activeName: 'data'
+})
+
+const size = ref(0)
+size.value = window.innerHeight - 210;
+window.addEventListener('resize', () => {
+  let v = window.innerHeight - 210;
+  size.value = v > 300 ? v : 300;
+});
+
+function saveData() {
+  dataConfig.value.setDeleteTable();
+  post(http,"/online/tableConfig/saveJson", toRaw(provides), undefined, false).then(res => {
+    emits('configClose', provides.form.theme);
+  })
+}
+
+function init(o, v) {
+  get(http,"/online/tableConfig/getJson", {uuid: v.uuid, theme: o}).then(res => {
+    if (res && res.form) {
+      provides.form = res.form;
+      provides.tableColumn = res.tableColumn;
+      nextTick(() => {
+        dataConfig.value.sqlParseTable();
+      })
+    } else {
+      provides.form.parentId = v.parentId;
+      provides.form.uuid = v.uuid;
+      provides.form.theme = o;
+    }
+  })
+}
+
+function handleClose() {
+  isAdd.value = false;
+}
+
+function handleClick() {
+
+}
+
+watch(() => tab.activeName, (o, v) => {
+  if (o == 'data') {
+    tableConfig.value.setConfigData();
+  }
+})
+
+provide('configData', provides);
+
+const emits = (m, v) => {
+  if (m == "updateVisible") {
+    dataConfig.value.refreshColumn();
+  } else {
+    emit("emits", {m: m, v});
+  }
+}
+// 子组件调用父组件
+const emit = defineEmits(["emits"]); //声明 emits
+defineExpose({
+  init,
+})
+
+</script>
+<style lang="less">
+</style>

package/src/views/table/add-or-edit/configOld/tableTags/columnConfig.js

@@ -0,0 +1,5 @@
+export default {
+
+}
+
+

package/src/views/table/add-or-edit/configOld/tableTags/index.vue

@@ -0,0 +1,353 @@
+<template>
+  <div>
+    <vxe-form :data="configData.form">
+      <vxe-form-item title="启用分页" field="paging" :span="4" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-checkbox v-model="configData.form.paging" checked-value="1" unchecked-value="0"></vxe-checkbox>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="树形table" field="tips" :span="4" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-checkbox v-model="configData.form.tree" checked-value="1" unchecked-value="0"/>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="选项框" :span="8" field="selectBox" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-radio v-model="configData.form.selectBox" label="2" value="2" content="多选">多选</vxe-radio>
+          <vxe-radio v-model="configData.form.selectBox" label="1" value="1" content="单选">单选</vxe-radio>
+          <vxe-radio v-model="configData.form.selectBox" label="0" value="0" content="无">无</vxe-radio>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="底部提示" :span="8" field="tips" :item-render="{}">
+        <template #default="{ data }">
+          <dict-tag code="table_bottom_tips" v-model="configData.form.tips"></dict-tag>
+        </template>
+      </vxe-form-item>
+
+      <vxe-form-item title="parentId" :span="10" v-if="configData.form.tree != 0" field="treeParentId"
+                     :item-render="{}">
+        <template #default="{ data }">
+          <vxe-select v-model="configData.form.treeParentId"
+                      placeholder="请选择树形上级ID" :options="state.treeParentIdOptions" filterable></vxe-select>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="树展开列" :span="10" v-if="configData.form.tree != 0" field="openColumn" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-select v-model="configData.form.openColumn"
+                      placeholder="请选择展开树列" :options="state.openColumnOptions" filterable></vxe-select>
+        </template>
+      </vxe-form-item>
+
+      <vxe-form-item title="工具栏按钮" :span="10" field="toolBut" :item-render="{}">
+        <template #default>
+          <vxe-select v-model="configData.form.toolBut"
+                      :option-props="{label:'name',value:'code',key:'code'}"
+                      placeholder="请选择工具栏按钮"
+                      :options="state.toolButOptions"
+                      @change="setToolButOptionsValue"
+                      multiple
+                      filterable style="width: 80%"></vxe-select>
+          <vxe-button @click="butConfigClick('toolButConfig')">配</vxe-button>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="操作按钮" :span="10" field="operationBut" :item-render="{}">
+        <template #default>
+          <vxe-select v-model="configData.form.operationBut"
+                      placeholder="请选择操作按钮"
+                      style="width: 80%"
+                      :option-props="{label:'name',value:'code',key:'code'}"
+                      :options="state.operationButOptions"
+                      @change="setOperationButOptionsValue"
+                      multiple
+                      filterable>
+
+          </vxe-select>
+          <vxe-button @click="butConfigClick('operationButConfig')">配</vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+
+
+    <vxe-table :data="state.tableData" stripe border=inner  height="600" size="mini">
+      <vxe-column type="expand" fixed="left" width="20">
+        <template #content="{ row }">
+          <ul class="expand-wrapper">
+            <li>
+              <span>ID：</span>
+              <span>{{ row.id }}</span>
+            </li>
+          </ul>
+        </template>
+      </vxe-column>
+      <vxe-column type="seq" width="60" fixed="left" title="序号"></vxe-column>
+      <vxe-column field="field" title="字段" fixed="left" width="130" >
+        <template #default="scope">
+          <span>{{ scope.row.field + '（' + scope.row.label + '）' }}</span>
+        </template>
+      </vxe-column>
+      <vxe-column field="title" title="标题" width="150" fixed="left">
+        <template #default="scope">
+          <vxe-input v-model="scope.row.title" size="small"></vxe-input>
+        </template>
+      </vxe-column>
+      <vxe-column field="width" title="宽度" width="80">
+        <template #default="scope">
+          <vxe-input v-model="scope.row.width" size="small"></vxe-input>
+        </template>
+      </vxe-column>
+      <vxe-column field="display" title="显示" width="45">
+        <template #default="scope">
+          <vxe-checkbox v-model="scope.row.visible" checked-value="1" @change="updateVisible"
+                        unchecked-value="0"></vxe-checkbox>
+        </template>
+      </vxe-column>
+      <vxe-column field="edit" title="编辑" width="45">
+        <template #default="scope">
+          <vxe-checkbox v-model="scope.row.edit" checked-value="1" unchecked-value="0" size="small"></vxe-checkbox>
+        </template>
+      </vxe-column>
+      <vxe-column field="sort" title="排序" width="45">
+        <template #default="scope">
+          <vxe-input v-model="scope.row.sort" :true-label="1" :false-label="0" size="small"></vxe-input>
+        </template>
+      </vxe-column>
+      <vxe-column field="dictCode" title="数据字典" width="80">
+        <template #default="scope">
+          <vxe-input v-model="scope.row.dictCode"></vxe-input>
+        </template>
+      </vxe-column>
+      <vxe-column field="selectType" title="查询类型" width="85">
+        <template #default="scope">
+          <dict-tag code="select_type" v-model="scope.row.selectType"></dict-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="selectDom" width="100" title="查询控件" clearable>
+        <template #default="scope">
+          <dict-tag code="select_dom" v-model="scope.row.selectDom"></dict-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="fixed" title="fixed" width="80">
+        <template #default="scope">
+          <dict-tag code="table_fixed" v-model="scope.row.fixed"></dict-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="formatter" title="formatter" width="80">
+        <template #default="scope">
+          <codemirror-tag v-model="scope.row.formatter" size="small"></codemirror-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="otherProp" title="其他属性" width="80">
+        <template #default="scope">
+          <codemirror-tag v-model="scope.row.otherProp"></codemirror-tag>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <tool-but-config ref="toolButConfig" @close="toolButConfigClose"></tool-but-config>
+    <operation-but-config ref="operationButConfig" @close="operationButConfigClose"></operation-but-config>
+  </div>
+</template>
+
+<script setup>
+import {inject, nextTick, reactive, ref, toRaw, watch} from "vue";
+import ToolButConfig from "@/views/table/add-or-edit/configOld/tableTags/tool-but-config.vue";
+import OperationButConfig from "@/views/table/add-or-edit/configOld/tableTags/operation-but-config.vue";
+import {get} from "@/utils/http/httpUtils";
+
+const configData = inject('configData');
+const http = inject("http")
+const state = reactive({
+  tableColumn: [],
+  toolButOptions: [],
+  operationButOptions: [],
+  openColumnOptions: [],
+  treeParentIdOptions: [],
+  tableData: []
+})
+
+watch(() => configData.tableColumn, (tableColumn) => {
+  state.tableData = tableColumn;
+  setChecked();
+})
+const operationButConfig = ref();
+const toolButConfig = ref();
+function setChecked() {
+  if (state.toolButOptions.length == 0 || state.operationButOptions.length == 0) {
+    initBaseData();
+    setTimeout(() => {
+      setChecked();
+    }, 500)
+    return;
+  }
+  let toolButOptions = [];
+  for (let t of state.toolButOptions) {
+    for (let o of configData.form.toolBut) {
+      if (o == t.code) {
+        t["checked"] = 1;
+        break;
+      }
+    }
+    toolButOptions.push(t)
+  }
+  state.toolButOptions = toolButOptions;
+
+  let operationButOptions = [];
+  for (let t of state.operationButOptions) {
+    for (let o of configData.form.operationBut) {
+      if (o == t.code) {
+        t["checked"] = 1;
+        break;
+      }
+    }
+    operationButOptions.push(t);
+  }
+  state.operationButOptions = operationButOptions;
+}
+
+function initBaseData() {
+  get(http,"/online/tableOperationButConfig/list").then(data => {
+    if(configData.form.operationButOptions){
+      let operationButOptions = [];
+      let o;
+      for (let d of data) {
+        o = d;
+        for (let t of configData.form.operationButOptions) {
+          if (d.code == t.code) {
+            o = t;
+          }
+        }
+        operationButOptions.push(o);
+      }
+      state.operationButOptions = operationButOptions;
+    }else{
+      state.operationButOptions = data;
+    }
+
+  })
+  get(http,"/online/tableToolButConfig/list").then(data => {
+    if(configData.form.toolButOptions) {
+      let toolButOptions = [];
+      for (let d of data) {
+        let o = d;
+        for (let t of configData.form.toolButOptions) {
+          if (d.code == t.code) {
+            o = t;
+          }
+        }
+        toolButOptions.push(o);
+      }
+      state.toolButOptions = toolButOptions;
+    }else{
+      state.toolButOptions = data;
+    }
+  })
+}
+
+function setToolButOptionsValue(o) {
+  configData.form.toolButOptions = [];
+  for (let j = 0; j < state.toolButOptions.length; j++) {
+    let checked = 0;
+    for (let k of o.value) {
+      if (state.toolButOptions[j]['code'] == k) {
+        checked = 1;
+        configData.form.toolButOptions.push(state.toolButOptions[j]);
+        break;
+      }
+    }
+    state.toolButOptions[j].checked = checked;
+  }
+}
+
+function butConfigClick(v) {
+  if (v == "operationButConfig") {
+    operationButConfig.value.init(state.operationButOptions);
+  } else if (v == "toolButConfig") {
+    toolButConfig.value.init(state.toolButOptions);
+  }
+}
+
+function setOperationButOptionsValue(o) {
+  let operationButOptions = [];
+  for (const operationButOption of state.operationButOptions) {
+    let checked = 0;
+    for (let k of o.value) {
+      if (operationButOption['code'] == k) {
+        checked = 1;
+        operationButOptions.push(operationButOption);
+        break;
+      }
+    }
+    operationButOption.checked = checked;
+  }
+  configData.form.operationButOptions = operationButOptions;
+}
+
+function toolButConfigClose(v) {
+  state.toolButOptions = v;
+  configData.form.toolButOptions = [];
+  let data = [];
+  for (let i = 0; i < v.length; i++) {
+    if (v[i].checked == 1) {
+      data.push(v[i].code);
+      configData.form.toolButOptions.push(v[i]);
+    }
+  }
+  configData.form.toolBut = data;
+}
+
+function operationButConfigClose(v) {
+  state.operationButOptions = v;
+  configData.form.operationButOptions = [];
+  let data = [];
+  for (let i = 0; i < v.length; i++) {
+    if (v[i].checked == 1) {
+      data.push(v[i].code);
+      configData.form.operationButOptions.push(v[i]);
+    }
+  }
+  configData.form.operationBut = data;
+}
+
+function setTableData(v) {
+  let tableData = [];
+  for (let i = 0; i < v.length; i++) {
+    let push = true;
+    let o = v[i];
+    for (let j = 0; j < state.tableData.length; j++) {
+      if (o.asName == state.tableData[j].field) {
+        push = false;
+        state.tableData[j].sort = i;
+        tableData.push(state.tableData[j]);
+        break;
+      }
+    }
+    if (push) {
+      tableData.push({
+        sort: i,
+        tableField: o.column_name,
+        field: o.asName,
+        title: o.label
+      });
+    }
+  }
+  state.tableData = tableData;
+}
+
+
+function setConfigData() {
+  configData.tableColumn = state.tableData;
+}
+
+function updateVisible() {
+  emits('emits', 'updateVisible');
+}
+
+defineExpose({
+  setConfigData,
+})
+// 子组件调用父组件
+const emits = defineEmits(['updateVisible']); //声明 emits
+</script>
+
+<style scoped>
+
+</style>

package/src/views/table/add-or-edit/configOld/tableTags/operation-but-config.vue

@@ -0,0 +1,75 @@
+<template>
+  <vxe-modal
+      v-model="dialogVisible"
+      :show-close="false"
+      title="操作按钮配置"
+      width="900"
+      height="600"
+      resize
+      :before-hide-method="handleClose" showFooter>
+    <vxe-table ref="table" :data="state.tableData" stripe size="mini">
+      <vxe-column type="checkbox" width="40"></vxe-column>
+      <vxe-column field="code" title="定义编码" width="80" align="center"/>
+      <vxe-column field="name" title="按钮名称" align="center"/>
+      <vxe-column field="sort" title="排序" width="45" align="center"/>
+      <vxe-column field="icon" title="图标" width="45" align="center"/>
+      <vxe-colgroup field="b" title="回调方法" align="center">
+        <vxe-column field="clickCallBackMethod" title="单击(click)" align="center"/>
+        <vxe-column field="showCallBack" title="显示(show)" align="center"/>
+        <vxe-column field="disabledCallBack" title="禁用（disabled）" align="center"/>
+      </vxe-colgroup>
+      <vxe-column title="customFunction" align="center">
+        <template #default="scope">
+          <codemirror-tag v-model="scope.row.customFunction"></codemirror-tag>
+        </template>
+      </vxe-column>
+    </vxe-table>
+  </vxe-modal>
+</template>
+
+<script setup>
+import {nextTick, reactive, ref} from "vue";
+
+const table = ref(null);
+const state = reactive({
+  tableData: [],
+})
+const dialogVisible = ref(false);
+
+function init(v) {
+  dialogVisible.value = true;
+  state.tableData = v;
+  nextTick(() => {
+    table.value.clearCheckboxRow();
+    nextTick(() => {
+      table.value.setCheckboxRow(v.filter(o => o.checked == 1), true);
+    })
+  })
+}
+
+function handleClose() {
+  for (let tableDatum of state.tableData) {
+    let checked = 0;
+    for (let checkboxRecord of table.value.getCheckboxRecords()) {
+      if (tableDatum.code == checkboxRecord.code) {
+        checked = 1;
+        break;
+      }
+    }
+    tableDatum.checked = checked;
+  }
+  emit('close', state.tableData);
+  dialogVisible.value = false;
+}
+
+// 子组件调用父组件
+const emit = defineEmits(["close"]); //声明 emits
+// 对外暴露
+defineExpose({
+  init,
+});
+</script>
+
+<style scoped>
+
+</style>

package/src/views/table/add-or-edit/configOld/tableTags/tool-but-config.vue

@@ -0,0 +1,92 @@
+<template>
+  <vxe-modal
+      v-model="dialogVisible"
+      title="工具栏按钮配置"
+      width="900"
+      height="600"
+      resize
+      :before-hide-method="handleClose" showFooter>
+    <vxe-table ref="table" :data="state.tableData"  stripe size="mini">
+      <vxe-column type="checkbox" width="40"></vxe-column>
+      <vxe-column type="seq" width="60" title="序号"></vxe-column>
+      <vxe-column field="code" title="定义编码" align="center"/>
+      <vxe-column title="按钮名称" align="center">
+        <template #default="scope">
+          <vxe-input v-model="scope.row.name" size="mini"/>
+        </template>
+      </vxe-column>
+      <vxe-column title="排序" width="80" align="center">
+        <template #default="scope">
+          <vxe-input type="number" v-model="scope.row.sort" style="width: 70px;" controls-position="right" size="mini"/>
+        </template>
+      </vxe-column>
+      <vxe-column field="icon" title="图标" width="45" align="center"/>
+      <vxe-column field="clickCallBackMethod" title="单击回调方法" align="center"/>
+      <vxe-colgroup field="b" title="默认" align="center">
+        <vxe-column title="禁用" width="45" align="center">
+          <template #default="scope">
+            <vxe-checkbox checked-value="1" unchecked-value="0" v-model="scope.row.defaultDisabled"/>
+          </template>
+        </vxe-column>
+        <vxe-column title="显示" width="45" align="center">
+          <template #default="scope">
+            <vxe-checkbox checked-value="1" unchecked-value="0" v-model="scope.row.defaultShow"/>
+          </template>
+        </vxe-column>
+        <vxe-column title="customFunction" align="center">
+          <template #default="scope">
+            <codemirror-tag v-model="scope.row.customFunction"></codemirror-tag>
+          </template>
+        </vxe-column>
+      </vxe-colgroup>
+    </vxe-table>
+  </vxe-modal>
+</template>
+
+<script setup>
+import {nextTick, reactive, ref} from "vue";
+
+const table = ref(null);
+const state = reactive({
+  tableData: [],
+})
+const dialogVisible = ref(false);
+const init = (v) => {
+  dialogVisible.value = true;
+  state.tableData = v;
+  nextTick(() => {
+    table.value.clearCheckboxRow();
+    nextTick(() => {
+      table.value.setCheckboxRow(v.filter(o => o.checked == 1), true);
+    })
+  })
+}
+
+
+function handleClose() {
+  for (let tableDatum of state.tableData) {
+    let checked = 0;
+    for (let checkboxRecord of table.value.getCheckboxRecords()) {
+      if (tableDatum.code == checkboxRecord.code) {
+        checked = 1;
+        break;
+      }
+    }
+    tableDatum.checked = checked;
+  }
+  emit('close', state.tableData);
+  dialogVisible.value = false;
+}
+
+
+// 子组件调用父组件
+const emit = defineEmits(["close"]); //声明 emits
+// 对外暴露
+defineExpose({
+  init,
+});
+</script>
+
+<style scoped>
+
+</style>