simple-frame-unit 1.0.2

package/lib/pages/DataSource/src/components/ControlViews/index.vue

@@ -0,0 +1,301 @@
+<template>
+  <el-drawer ref="drawer" :destroy-on-close="true" :visible.sync="controlPropsVisible" :wrapper-closable="false"
+             custom-class="es-modal"
+             direction="rtl" size='55%' title="控件属性">
+    <div class="es-drawer__content">
+      <!--  通用属性    -->
+      <ed-card v-if="showCommonProp" title="通用属性">
+        <ed-form v-model="defaultForm" :form-desc="defaultFormDesc">
+          <template v-slot:isLabelValueWrapper="scope">
+            <el-form-item v-show="scope.desc.isShow" v-bind="scope.desc">
+              <template #label>
+                <span>存储为label</span>
+                <el-tooltip class="item" effect="dark" placement="bottom">
+                  <div slot="content">{{ labelTooltip }}</div>
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </template>
+              <el-switch v-model="scope.model.isLabelValue"></el-switch>
+            </el-form-item>
+          </template>
+        </ed-form>
+      </ed-card>
+
+      <!-- 独立属性 -->
+      <ed-card :title="component.name">
+        <el-form :model="controlProps" label-position="left" label-width="120px">
+          <el-form-item v-for="(item, index) in component.attribute" v-if="isShowTags(item.showTag)" :key="index"
+                        size="mini">
+            <!-- label -->
+            <template v-slot:label>
+              {{ item.label }}
+              <el-tooltip v-if="item.tooltip" :content="item.tooltip" class="item" effect="dark" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+            </template>
+
+            <!-- 标签 -->
+            <component :is="item.tag" v-model="controlProps[item.name]" v-bind="bindProps(item)">
+              <ed-option-slot v-for="(option, index) of item.options"
+                              :key="index"
+                              :child="item.children"
+                              :data="option"
+                              :optionAttrs="option.attrs"
+                              :tags="item.tag"
+              ></ed-option-slot>
+
+              <!-- 按钮 -->
+              <el-button v-if="item.children==='el-button'" slot="append" icon="el-icon-search"
+                         @click="openSelectDict"></el-button>
+            </component>
+          </el-form-item>
+        </el-form>
+      </ed-card>
+
+      <ChooseDict ref="chooseDict" @choose="chooseCallBack"></ChooseDict>
+    </div>
+    <!-- 按钮区 -->
+    <div class="es-drawer__footer">
+      <el-button size="small" @click="cancelForm">取 消</el-button>
+      <el-button :loading="loading" size="small" type="primary" @click="handleClose">
+        {{ loading ? '提交中 ...' : '确 定' }}
+      </el-button>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import {FormDesc}                         from './BaseProps'
+import {controlType}                      from '../../../../../utils/setting'
+import {addControlProps, getControlProps} from '../../../../../api/ds'
+import {getDictItemByType}                from '../../../../../api/easyData'
+import {PROPS}                            from './control'
+import {getVarType}                       from "../../../../../utils/utils";
+import ChooseDict                         from '../modal/ChooseDict'
+
+export default {
+  name: 'Props',
+  components: {ChooseDict},
+  data() {
+    return {
+      controlPropsVisible: false,
+      loading: false,
+      currentRow: {},
+      propsData: {},
+      controlProps: {},
+      defaultForm: {},
+      component: {},
+      defaultFormDesc: []
+    }
+  },
+  computed: {
+    labelTooltip() {
+      return `单选数据库存为${this.currentRow.controlName}:{label:'',value:''}; 多选数据库存为${this.currentRow.controlName}:[{label:'',value:''}`
+    },
+    showCommonProp() {
+      return this.component.showCommonProp && this.component.showCommonProp.length > 0
+    },
+    /**
+     * @name isShowTags
+     * @returns {*|boolean}
+     * @description 表单项条件渲染
+     */
+    isShowTags() {
+      return (showTag) => {
+        if (getVarType(showTag) === 'object') {
+          return showTag.value.includes(this.controlProps[showTag.label])
+        } else if (getVarType(showTag) === 'array') {
+          const arr = showTag.filter(i => i.value.includes(this.controlProps[i.label]))
+          return arr.length === showTag.length
+        } else if (getVarType(showTag) === 'undefined') {
+          return true
+        }
+      }
+    }
+  },
+  methods: {
+    /**
+     * @name showModal
+     * @param record
+     * @returns {Promise<void>}
+     * @description 显示弹窗
+     */
+    async showModal(record) {
+      this.currentRow = record;
+      const res = await getControlProps(record.id)
+
+      if (res.success) {
+        this.propsData = res.data;
+        const {data} = res
+        if (getVarType(data?.controlProps) === 'string') {
+          this.controlProps = JSON.parse(data.controlProps)
+          this.defaultForm = Object.assign({}, this.controlProps);
+        } else {
+          this.controlProps = Object.assign({})
+          this.defaultForm = Object.assign({})
+          if (record.controlType === 'select') {
+            this.$set(this.controlProps, 'selectBindType', 'diy')
+          }
+          if (record.controlType === 'cascader') {
+            this.$set(this.controlProps, 'cascaderBindType', 'json')
+          }
+        }
+
+        this.controlPropsVisible = true;
+
+        this.$nextTick(() => {
+          this.getComponent()
+        })
+      } else {
+        this.$message.error(res.$message)
+      }
+    },
+
+    /**
+     * @name getComponent
+     * @description 获取渲染组件信息
+     */
+    getComponent() {
+      if (this.currentRow.controlType) {
+        let currentControl = controlType.find(item => item.value === this.currentRow.controlType);
+        let component = PROPS.find(i => i.component === currentControl.component)
+        if (component) {
+          // 构建基础属性表单
+          if (getVarType(component.showCommonProp) === 'array') {
+            this.initFormDesc(component)
+          }
+
+          this.component = component
+          //赋值默认值
+          component.attribute.forEach(attr => {
+            if (getVarType(this.controlProps[attr.name]) === 'undefined' && getVarType(attr.defaultValue) !== 'undefined') {
+              this.$set(this.controlProps, attr.name, attr.defaultValue)
+            }
+          })
+        }
+      }
+    },
+
+    // 初始化表单描述
+    initFormDesc(component) {
+      this.defaultFormDesc = []
+      FormDesc.map(desc => {
+        this.defaultFormDesc.push({
+          isShow: component.showCommonProp.includes(desc.prop),
+          ...desc,
+        })
+      })
+    },
+
+    /**
+     * @name bindProps
+     * @param item
+     * @returns {{}}
+     */
+    bindProps(item) {
+      let props = {};
+
+      if (item.props) {
+        props = Object.assign({}, props, item.props)
+      }
+
+      if (item.tag === "ed-table-editor") {
+        props.isTitle = this.controlProps.selectBindType === "diy"
+      }
+
+      return props
+    },
+
+    handleClose() {
+      if (this.loading) {
+        return;
+      }
+      this.$confirm('确定要保存控件属性吗？')
+          .then(_ => {
+            this.loading = true;
+            let {defaultValue, validateExpression, isLabelValue} = this.defaultForm
+            let controlProps = Object.assign({}, this.controlProps, {defaultValue, validateExpression, isLabelValue});
+            for (let k in controlProps) {
+              let value = controlProps[k];
+              if (value === '' || value === null || value === undefined) {
+                delete controlProps[k];
+              }
+            }
+            if (this.currentRow.controlType === 'popup') {
+              let popupObj = {}
+              for (let i = 0; i < PROPS.length; i++) {
+                if (PROPS[i].component === 'easydata-popup') {
+                  popupObj = PROPS[i]
+                  break
+                }
+              }
+              const data = popupObj.attribute[1].options
+              for (let i = 0; i < data.length; i++) {
+                const item = data[i]
+                if (item.value === this.controlProps.popupMode) {
+                  controlProps.convertExpression = item.expression
+                  break
+                }
+              }
+            }
+            let param = {
+              controlId: this.currentRow.id,
+              id: this.propsData?.id,
+              controlProps: JSON.stringify(controlProps)
+            }
+            addControlProps(param).then(res => {
+              if (res.success) {
+                this.$message.success("保存成功");
+              } else {
+                this.$message.error(res.msg);
+              }
+            }).finally(e => {
+              this.loading = false;
+              this.controlPropsVisible = false;
+            })
+          }).catch(_ => {
+      });
+    },
+    cancelForm() {
+      this.loading = false;
+      this.controlPropsVisible = false;
+    },
+    changeControlProps(value) {
+      this.controlProps = value;
+    },
+    deleteRow(data) {
+      this.controlProps.dataSource.splice(data.$index, 1)
+    },
+    openSelectDict() {
+      this.$refs.chooseDict.show()
+    },
+    chooseCallBack(val) {
+      this.$set(this.controlProps, 'dictType', val)
+      getDictItemByType({type: val}).then((resp) => {
+        if (resp.data) {
+          let rows = [];
+          for (const item of resp.data) {
+            const row = {label: item.itemLabel, value: item.itemValue}
+            rows.push(row)
+          }
+          this.$set(this.controlProps, 'dataSource', rows)
+        }
+      })
+    },
+    addItem() {
+      this.controlProps.dataSource = this.controlProps.dataSource || this.$set(this.controlProps, 'dataSource', []);
+      this.controlProps.dataSource.push({isChecked: false, triggerControl: ''})
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-table .el-form-item {
+  margin-bottom: 0px
+}
+
+@import "../../../../../style/index";
+
+.ed-card {
+  margin-bottom: 10px;
+}
+</style>

package/lib/pages/DataSource/src/components/TableOperationModal.vue

@@ -0,0 +1,225 @@
+<template>
+  <el-drawer :visible.sync="dialogVisible" size="45%" title="表操作">
+    <el-card class="es-box-card">
+      <el-descriptions :column="1" border class="margin-top" title="表信息">
+        <el-descriptions-item v-for="(column, index) in tableInfoColumns" :label="column.label" :key="index">
+          <div v-if="column.slots">
+            <el-button :loading="loading" size="mini" type="success" @click="createTable">创建表</el-button>
+            <el-button :loading="loading" size="mini" type="warning" @click="truncateTable">清空表</el-button>
+            <el-button :loading="loading" plain size="mini" type="warning" @click="clearTable">清除表</el-button>
+            <el-button :loading="loading" size="mini" type="primary" @click="alterTable">重载表</el-button>
+            <el-button :loading="loading" size="mini" type="danger" @click="dropTable">删除表</el-button>
+          </div>
+          <span v-else>{{ tableInfo[column.prop] }}</span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card class="es-box-card--top">
+      <el-descriptions :column="2" border class="margin-top" title="表信息">
+        <el-descriptions-item v-for="(column, index) in describeColumn" :label="column.label" :key="index">
+          <span v-if="column.isGeneralColumn">{{ formatGeneralColumn(describeData[column.prop] || describeData[column.empty])}}</span>
+          <span v-else-if="!column.format">{{ describeData[column.prop] || describeData[column.empty] }}</span>
+          <span v-else> {{ formatDate(describeData[column.prop]) ||  describeData[column.empty]}} </span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card class="es-box-card--top">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column label="列名" prop="columnName"></el-table-column>
+        <el-table-column label="数据类型" prop="columnType"></el-table-column>
+        <el-table-column label="默认值" prop="columnDefault"></el-table-column>
+        <el-table-column label="是否为空" prop="isNullAble"></el-table-column>
+        <el-table-column label="备注" prop="columnComment"></el-table-column>
+      </el-table>
+    </el-card>
+  </el-drawer>
+</template>
+
+<script>
+import ds from '../../../../api/ds'
+import {formatDate} from '../../../../utils/dateUtils'
+
+export default {
+  name: "TableOperationModal",
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      dataSourceId: '',
+      tableInfo: {},
+      tableInfoColumns:[
+        {
+          label: "表名称",
+          prop: "tableName",
+        },
+        {
+          label: "表备注",
+          prop: "remark",
+        },
+        {
+          label: "表操作",
+          prop: "",
+          slots: true
+        }
+      ],
+      describeColumn: [
+        {
+          label: "字符集",
+          prop: "tableCollation",
+          empty: "未创建表",
+        },
+        {
+          label: "数据库引擎",
+          prop: "engine",
+          empty: "未创建表",
+        },
+        {
+          label: "创建时间",
+          prop: "createTime",
+          empty: "未创建表",
+          format: true
+        },
+        {
+          label: "更新时间",
+          prop: "",
+          empty: ""
+        },
+        {
+          label: '字段类型',
+          prop: "isGeneralColumn",
+          isGeneralColumn: true
+        }
+      ],
+      describeData: {},
+      tableData: []
+    }
+  },
+  methods: {
+    showModal(record) {
+      this.tableInfo = {}
+      this.describeData = {}
+      this.dataSourceId = record.id
+      this.dialogVisible = true
+      this.loadData(this.dataSourceId)
+
+    },
+    async loadData(id) {
+      const param = {dataSourceId: id}
+      const {success, data} = await ds.getTableInfoByDsId(param)
+      if (success && data) {
+          this.tableInfo = data
+      }
+
+      const resp = await ds.getTableSchema({id: this.dataSourceId})
+      if (resp.success) {
+        if (resp.data) {
+          if (resp.data.columnSchemas) {
+            this.tableData = resp.data.columnSchemas
+          } else {
+            this.tableData = []
+          }
+          if (resp.data.tableSchema) {
+            this.describeData = resp.data.tableSchema
+          } else {
+            this.describeData = {}
+          }
+        }
+      }
+    },
+    formatDate(date) {
+      if (date) {
+        let dateTime = new Date(date)
+        return formatDate(dateTime, 'yyyy-MM-dd hh:mm:ss')
+      }
+      return '';
+
+    },
+    formatGeneralColumn(data) {
+      if(data) {
+        if( data === 1) {
+          return '普通列';
+        }
+      }
+      return '虚拟列';
+    },
+    createTable() {
+      this.$confirm('确定要创建表吗？')
+        .then(_ => {
+          this.loading = true
+          ds.createTable({id: this.dataSourceId}).then((resp) => {
+            if (resp.success) {
+              this.$message.success(resp.msg || "操作成功!")
+              this.loadData(this.dataSourceId)
+            }
+          }).finally(() => {
+            this.loading = false
+          })
+        })
+    },
+    dropTable() {
+      this.$confirm('确定要删除表吗？')
+        .then(_ => {
+          this.loading = true
+          ds.dropTable({id: this.dataSourceId}).then((resp) => {
+            if (resp.success) {
+              this.$message.success(resp.msg || "操作成功!")
+              this.loadData(this.dataSourceId)
+            }
+          }).finally(() => {
+            this.loading = false
+          })
+        })
+    },
+    /**
+     * 清除表
+     */
+    clearTable() {
+      this.$confirm('确定要清除表吗？')
+        .then(_ => {
+          this.loading = true
+          ds.clearTable({id: this.dataSourceId}).then((resp) => {
+            if (resp.success) {
+              this.$message.success(resp.msg || "操作成功!")
+              this.loadData(this.dataSourceId)
+            }
+          }).finally(() => {
+            this.loading = false
+          })
+        })
+    },
+    /**
+     * 清空表
+     */
+    truncateTable() {
+      this.$confirm('确定要清空表吗？').then(_ => {
+          this.loading = true
+          ds.truncateTable({id: this.dataSourceId}).then((resp) => {
+            if (resp.success) {
+              this.$message.success(resp.msg || "操作成功!")
+              this.loadData(this.dataSourceId)
+            }
+          }).finally(() => {
+            this.loading = false
+          })
+        })
+    },
+    alterTable() {
+      this.$confirm('确定要重载表吗？').then(async _ => {
+        this.loading = true
+        const resp = await ds.alterTable({id: this.dataSourceId})
+        if (resp.success) {
+          this.$message.success(resp.msg || "操作成功!")
+          this.loadData(this.dataSourceId)
+        }
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 3px;
+}
+</style>