simple-frame-unit 1.0.2

package/lib/pages/Template/src/components/model/TemplatePreview2.vue

@@ -0,0 +1,101 @@
+<template>
+  <ed-dialog ref="TemplatePreview" v-loading="loading" :destroy-on-close="true" :fullscreen="true" :title="title"
+              :visible="visible"
+              @close="close">
+    <el-form v-if="showBizParams" ref="form" label-width="80px" size="mini">
+      <el-form-item v-for="(bizParam, index) in bizParamMaps" :key="index" :label="bizParam.label">
+        <el-input v-model="bizParam.value" @change="onChange"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button @click="onReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <easy-data-template v-if="visible" ref="TemplateView" :bizParams="bizParams" :templateConfig="config" ></easy-data-template>
+  </ed-dialog>
+</template>
+<script>
+
+export default {
+  name: "TemplatePreview2",
+  props: {
+    showBizParams: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    bizParamStr: {
+      type: String,
+      default: ''
+    },
+  },
+  watch:{
+    bizParamStr: {
+      immediate: true,
+      handler: function (newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
+          const temp = newVal.split(",")
+          this.bizParamMaps = []
+          temp.map(i=>this.bizParamMaps.push({label: i, value: ""}))
+        }
+      }
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      url: {
+        getTemplate: '/easydata/template/getModule'
+      },
+      templateId: null,
+      config: {},
+      bizParams: {},
+      bizParamMaps: []
+    }
+  },
+  methods: {
+    /**
+     * 根据模版编号查询加载
+     * @param {*} templateId
+     * @param config
+     */
+    showModal(config) {
+      this.config = config
+      this.visible = true;
+    },
+    onChange() {
+
+    },
+    onSubmit() {
+      this.bizParamMaps.map(item => {
+        this.$set(this.bizParams, item.label, item.value)
+      })
+    },
+    onReset() {
+      this.bizParamMaps.map(item => {
+        item.value = ""
+      })
+    },
+    close() {
+      this.visible = false
+      this.bizParams = {}
+      this.bizParamMaps = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.my-label {
+  background: #E1F3D8;
+}
+
+.pages :deep(.el-dialog) {
+  max-width: 95% !important;
+  max-height: 98% !important;
+}
+</style>

package/lib/pages/Template/src/hooks/index.js

@@ -0,0 +1,3 @@
+import useEmits from "./useEmits";
+
+export default [useEmits]

package/lib/pages/Template/src/hooks/useEmits.js

@@ -0,0 +1,64 @@
+
+
+export default {
+    methods: {
+        /**
+         * 点击动态模版操作右侧属性
+         * @param {*} command 
+         */
+        async updateRightProp(command) {
+            this.propActiveName = command;
+            await this.recordRightProp()
+            //获取参数属性
+            let module
+            if ('oneProp' === command) {
+                module = this.oneModules[this.oneModuleActive]
+            } else if ('twoProp' === command) {
+                let twoModules = this.oneModules[this.oneModuleActive]?.twoModules;
+                module = twoModules[this.twoModuleActive]
+            }
+            if (module) {
+                this.$set(this[command], 'formData', Object.assign({ id: module.id }, { key: module.prop? module.prop : {}}))
+            }
+        },
+        //记录右侧模块属性
+        async recordRightProp() {
+            let {GlobalPropEasyDataList, OnePropEasyDataList, TwoPropEasyDataList } = this.$refs;
+            //记录全局模块属性
+            if(GlobalPropEasyDataList) {
+                let oldGlobalModuleProp = await GlobalPropEasyDataList.getFormData();
+                if (oldGlobalModuleProp.key && this.templateModel) {
+                    this.$set(this.templateModel, 'prop', oldGlobalModuleProp.key)
+                }
+            }
+            //记录历史一级模块属性
+            if (OnePropEasyDataList) {
+                let oldOneModuleProp = await OnePropEasyDataList.getFormData();
+                if (oldOneModuleProp.id) {
+                    let oldOneModuleIndex = this.oneModules.findIndex(t => t.id === oldOneModuleProp.id);
+                    let oldOneModule = this.oneModules.find(t => t.id === oldOneModuleProp.id);
+                    if (oldOneModule) {
+                        let temp = Object.assign({}, oldOneModule)
+                        temp.prop = Object.assign({},oldOneModuleProp.key)
+                        this.oneModules.splice(oldOneModuleIndex, 1, temp)
+
+                    }
+                }
+            }
+            //记录历史二级模块属性
+            if (TwoPropEasyDataList) {
+                let oldTwoModuleProp = await TwoPropEasyDataList.getFormData();
+                let twoModules = this.oneModules[this.oneModuleActive]?.twoModules;
+                if (oldTwoModuleProp.id && twoModules) {
+                    let oldTwoModuleIndex = twoModules.findIndex(t => t.id === oldTwoModuleProp.id);
+                    let oldTwoModule = twoModules.find(t => t.id === oldTwoModuleProp.id);
+                    if (oldTwoModule) {
+                        oldTwoModule.prop = oldTwoModuleProp.key
+                        twoModules.splice(oldTwoModuleIndex, 1, oldTwoModule)
+                        this.$set(this.oneModules[this.oneModuleActive], 'twoModules', twoModules)
+                    }
+                }
+            }
+        },
+    }
+}

package/lib/pages/Template/src/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <easy-data-list ref="EasyDataList" :dataSourceName="dataSourceName" :formProps="formProps" :tableProps="{operateFixed: 'right', operateWidth: 280}">
+      <template v-slot:extra>
+        <el-upload :file-list="fileList" :http-request="handlerImport" :limit="1" :multiple="false"
+                   :show-file-list="false" action="" style="display: inline-block;margin: 0px 10px">
+          <el-button :loading="operLoading" icon="el-icon-upload2" plain size="mini" type="primary">导入</el-button>
+        </el-upload>
+      </template>
+      <template #tableSlot="{ row }">
+        <div class="operation" data-width="180">
+          <el-button size="mini" type="text" @click="handlerEdit(row)">编辑</el-button>
+          <el-divider direction='vertical'/>
+          <el-button size="mini" type="text" @click="handlerDesigner(row)">定义</el-button>
+          <el-divider direction='vertical'/>
+          <el-button size="mini" type="text" @click="handlerPreview(row)">预览</el-button>
+          <el-divider direction='vertical'/>
+          <el-dropdown trigger="click">
+            <span class="el-dropdown-link">
+                更多<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item @click.native="handlerCopy(row)">复制</el-dropdown-item>
+              <el-dropdown-item @click.native="handlerExport(row)">导出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-divider direction='vertical'/>
+          <el-popconfirm title="确定删除数据吗？" @confirm="handlerDelete(row.id)">
+            <el-button slot="reference" size="mini" style="color: red" type="text">删除</el-button>
+          </el-popconfirm>
+        </div>
+      </template>
+    </easy-data-list>
+    <DefineModal ref="DefineModal"></DefineModal>
+    <TemplatePreview ref="TemplatePreview" :title="previewTitle"></TemplatePreview>
+  </div>
+</template>
+
+<script>
+import DefineModal     from "./components/DefineModal";
+import TemplatePreview from "./components/TemplatePreview";
+
+export default {
+  name: "TemplateList",
+  components: {DefineModal, TemplatePreview},
+  data() {
+    return {
+      dataSourceName: 'easy_template_info',
+      actionProps: {showAddBtn: true, showExportBtn: false},
+      previewTitle: '',
+      fileList: [],
+      operLoading: false,
+      url: {
+        copyTemplate: "/easydata/template/copyTemplate",
+        exportTemplate: '/easydata/template/exportTemplate',
+        importTemplate: '/easydata/template/importTemplate'
+      }
+    }
+  },
+  methods: {
+    handlerPreview(record) {
+      this.previewTitle = record.keyInfoObject.template_name + ' -预览'
+      this.$refs.TemplatePreview.showModal(record.id)
+    },
+    handlerDesigner(record) {
+      this.$refs.DefineModal.showModal(record)
+    },
+    handlerEdit(record) {
+      this.$refs.EasyDataList.handlerEdit(record)
+    },
+    handlerDelete(record) {
+      this.$refs.EasyDataList.handlerDelete(record)
+    },
+    handlerCopy(record) {
+      this.$EdFrame.getAction(this.url.copyTemplate, {templateId: record.id}).then(res => {
+        if (res && res.success) {
+          this.$message.success(res.msg)
+          this.$refs.EasyDataList.searchQuery()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handlerExport(record) {
+      this.$EdFrame.getAction(this.url.exportTemplate, {templateId: record.id}).then((resp) => {
+        if (resp.success) {
+          let blob = new Blob([JSON.stringify(resp.data)], {
+            type: 'text/plain'
+          })
+          console.log(blob)
+          let fileName = record.keyInfoObject.template_name + '.tex'
+          if (window.navigator.msSaveOrOpenBlob) {
+            navigator.msSaveBlob(blob, fileName)
+          } else {
+            var link = document.createElement('a')
+            link.href = window.URL.createObjectURL(blob)
+            link.download = fileName
+            link.click()
+            //释放内存
+            window.URL.revokeObjectURL(link.href)
+          }
+        }
+      }).finally(() => {
+        this.$refs.EasyDataList.initLoading = false
+      })
+    },
+    handlerImport(param) {
+      let reader = new FileReader(); //新建一个FileReader
+      reader.readAsText(param.file, "UTF-8"); //读取文件
+      reader.onload = (evt) => { //读取完文件之后会回来这里
+        this.operLoading = true;
+        let fileString = evt.target.result; // 读取文件内容
+        this.$EdFrame.postAction(this.url.importTemplate, fileString).then((resp) => {
+          this.$message.success(resp.data || "操作成功!")
+          this.fileList = []
+          this.loadData()
+        }).finally(() => {
+          this.operLoading = false;
+        })
+      }
+    }
+  }
+}
+</script>

package/lib/popup/index.js

@@ -0,0 +1,8 @@
+export {default as DataSourceChoose} from './src/DataSourceChoose'
+export {default as DataSourceViewIdChoose} from './src/DataSourceViewIdChoose'
+export {default as UserChoose} from './src/UserChoose'
+export {default as OrgChoose} from './src/OrgChoose'
+export {default as DictChoose} from './src/DictChoose'
+export {default as InterfaceChoose} from './src/InterfaceChoose'
+export {default as RoleChoose} from './src/RoleChoose'
+export {default as TemplateChoose} from './src/TemplateChoose'

package/lib/popup/src/DataSourceChoose.vue

@@ -0,0 +1,44 @@
+<template>
+  <DataSourceList ref="DataSource" :columns="columns" :is-choose-model="true"
+                  @handleCurrentChange="handleCurrentChange"/>
+</template>
+
+<script>
+import DataSourceList from '../../pages/DataSource'
+
+export default {
+  name: 'DataSourceChoose',
+  components: {
+    DataSourceList
+  },
+  data() {
+    return {
+      currentVal: {},
+      columns: [
+        {
+          label: '数据源名称',
+          prop: 'dataSourceName',
+        },
+        {
+          label: '分类',
+          prop: 'classify',
+          formatter: this.classifyFmt
+        },
+        {
+          label: '数据源备注',
+          prop: 'remark',
+        }]
+    }
+  },
+  methods: {
+    handleCurrentChange(val) {
+      this.currentVal = val
+    },
+    getData() {
+      if (this.currentVal) {
+        return {label: this.currentVal.remark, value: this.currentVal.dataSourceName}
+      }
+    }
+  }
+}
+</script>

package/lib/popup/src/DataSourceViewIdChoose.vue

@@ -0,0 +1,67 @@
+<template>
+    <ed-table :columns="columns" :loading="loading" :data="tableData" border
+        @current-change="handleCurrentChange">
+    </ed-table>
+</template>
+<script>
+import { getVarType } from "../../utils/utils";
+import { controlInfoViewList } from '../../api/ds'
+
+export default {
+    name: 'DataSourceViewIdChoose',
+    data() {
+        return {
+            loading: false,
+            dataSourceName: '',
+            url: "/easydata/controlInfo/viewList",
+            tableData: [],
+            currentData: {}, //选中的数据
+            columns: [{
+                label: '视图名称',
+                prop: 'viewName'
+            },
+            {
+                label: '视图ID',
+                prop: 'id'
+            },
+            {
+                label: '分组名称',
+                prop: 'viewGroup'
+            },]
+        }
+    },
+    methods: {
+        getData() {
+            return { label: this.currentData.viewName, value: this.currentData.id }
+        },
+        loadData(params) {
+            if (params) {
+                if (getVarType(params.dataSourceName) === 'object') {
+                    this.dataSourceName = params.dataSourceName.value
+                } else {
+                    this.dataSourceName = params.dataSourceName
+                }
+                if (getVarType(this.dataSourceName) != 'string') {
+                    this.$message.error('数据源名称不允许为空')
+                    return;
+                }
+                controlInfoViewList({ data_source_name: this.dataSourceName }).then(res => {
+                    if (res.success) {
+                        this.tableData = res.data ? res.data : []
+                        this.tableData.unshift({
+                            id: 'default',
+                            viewName: '默认视图',
+                            viewGroup: 'default'
+                        })
+                    } else {
+                        this.$message.warning(res.msg)
+                    }
+                })
+            }
+        },
+        handleCurrentChange(row) {
+            this.currentData = row
+        }
+    }
+}
+</script>

package/lib/popup/src/DictChoose.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
+      <el-form-item label="字典编号" prop="dataSourceName">
+        <el-input v-model="searchForm.type" placeholder="字典编号"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="loadData">查询</el-button>
+      </el-form-item>
+      <!--      <el-form-item>-->
+      <!--        <el-button @click="resetForm('searchForm')">重置</el-button>-->
+      <!--      </el-form-item>-->
+    </el-form>
+    <el-table
+      :data="tableData"
+      highlight-current-row @current-change="handleCurrentChange"
+    >
+      <!--      <el-table-column align="center" label="选择" width="55">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          &lt;!&ndash; 可以手动的修改label的值，从而控制选择哪一项 &ndash;&gt;-->
+      <!--          <el-radio v-model="selectVal" :label="scope.row.dictType" class="radio"-->
+      <!--          >&nbsp;-->
+      <!--          </el-radio-->
+      <!--          >-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
+      <el-table-column align="center" label="字段名称" prop="name"></el-table-column>
+      <el-table-column align="center" label="字段类型" prop="dictType"></el-table-column>
+      <el-table-column align="center" label="状态" prop="usable">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.usable">可用</el-tag>
+          <el-tag v-else>禁用</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="float: right">
+      <el-pagination
+        :page-size="page.pageSize"
+        :total="page.total"
+        layout="total, prev, pager, next"
+        @current-change="currentChange">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getDictList} from '../../api/easyData'
+
+export default {
+  name: "DictChoose",
+  data() {
+    return {
+      //列表显示数据
+      tableData: [],
+      //前端分页,这里是所有数据
+      tableList: [],
+      page: {total: 0, pageSize: 10},
+      //选择的数据
+      currentRow: {},
+      searchForm: {type: ''}
+    }
+  },
+  mounted() {
+    this.loadData();
+  },
+  methods: {
+    loadData() {
+      this.tableData = []
+      getDictList(this.searchForm).then((resp) => {
+        if (resp.data) {
+          this.tableList = resp.data
+          if (this.tableList.length > 10) {
+            this.tableData = this.tableList.slice(0, 10)
+          } else {
+            this.tableData = this.tableList
+          }
+          this.page.total = resp.data.length
+        }
+      })
+    },
+    currentChange(val) {
+      const index = (val - 1) * 10
+      if (this.tableList.length >= val * 10) {
+        this.tableData = this.tableList.slice(index, val * 10)
+      } else {
+        this.tableData = this.tableList.slice(index, this.tableList.length)
+      }
+    },
+    handleCurrentChange(row) {
+      this.currentRow = row
+    },
+    getData() {
+      return {value: this.currentRow.dictType, label: this.currentRow.name}
+    }
+  },
+}
+</script>
+
+<style scoped>
+:deep(.el-dialog) {
+  height: 85vh;
+}
+</style>

package/lib/popup/src/InterfaceChoose.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <EasyDataList :data-source-name="dataSourceName" :diy-colums="columns"
+                  :action-props="{showExportBtn:false,showAddBtn:false}"
+                  :table-props="{isOperate: false}"
+                  @handleCurrentChange="handleCurrentChange">
+
+    </EasyDataList>
+  </div>
+</template>
+<script lang="jsx">
+import EasyDataList from "../../packages/EasyDataList/EasyDataList.vue";
+
+export default {
+  name: 'InterfaceChoose',
+  components: {EasyDataList},
+  data() {
+    return {
+      dataSourceName: 'interface_info',
+      currentData: {}, //选中的数据
+      columns: [
+        {
+          label: 'Id',
+          prop: 'id',
+        }, {
+          label: '接口名称',
+          prop: 'keyInfoObject.api_name',
+        },
+        {
+          label: '分类',
+          prop: 'keyInfoObject.api_group.label',
+          formatter: this.classifyFmt
+        },
+      ]
+    }
+  },
+  methods: {
+    getData() {
+      return {value: this.currentData.id, label: this.currentData.keyInfoObject.api_name};
+    },
+    handleCurrentChange(row) {
+      this.currentData = row
+    }
+  }
+}
+</script>

package/lib/popup/src/OrgChoose.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="app-container">
+    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
+      <el-form-item label="部门名称" prop="name">
+        <el-input v-model="queryParams.name" clearable placeholder="请输入部门名称" @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-if="refreshTable" v-loading="loading" :data="deptList" :default-expand-all="isExpandAll"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+              highlight-current-row row-key="id"
+              style="width: 100%"
+              @current-change="handleCurrentChange" @selection-change="handleSelectionChange">
+      <el-table-column
+        v-if="!isSearchForm&&controlProp.multiple"
+        type="selection" width="55">
+      </el-table-column>
+      <el-table-column label="部门编号" prop="id"></el-table-column>
+      <el-table-column label="部门名称" prop="name"></el-table-column>
+      <el-table-column :formatter="userNicknameFormat" label="负责人" prop="leader"/>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {listDept, listSimpleUsers} from "../../api/system";
+
+export default {
+  name: "OrgChoose",
+  props: ['controlProp', 'isSearchForm'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 表格树数据
+      deptList: [],
+      // 部门树选项
+      deptOptions: [],
+      // 用户下拉列表
+      users: [],
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 是否展开
+      expand: false,
+      // 查询参数
+      queryParams: {
+        name: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      currentRow: {},
+      multipleSelection: []
+    };
+  },
+  created() {
+    this.loadData();
+    // 获得用户列表
+    listSimpleUsers().then(response => {
+      this.users = response.data;
+    });
+  },
+  methods: {
+    getData() {
+      if (this.controlProp.multiple && !this.isSearchForm) {
+
+        let data = []
+        this.multipleSelection.forEach(item => {
+          data.push({value: item.id, label: item.name})
+        })
+        return data;
+      }
+      return {value: this.currentRow.id, label: this.currentRow.name}
+    },
+    handleCurrentChange(row) {
+      this.currentRow = row;
+    },
+    handleSelectionChange(row) {
+      this.multipleSelection = row;
+    },
+    /** 查询部门列表 */
+    loadData() {
+      this.loading = true;
+      listDept(this.queryParams).then(response => {
+        this.deptList = this.handleTree(response.data, "id");
+        this.loading = false;
+      });
+    },
+    // 用户昵称展示
+    userNicknameFormat(row, column) {
+      if (!row.leaderUserId) {
+        return '未设置';
+      }
+      for (const user of this.users) {
+        if (row.leaderUserId === user.id) {
+          return user.nickname;
+        }
+      }
+      return '未知【' + row.leaderUserId + '】';
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.loadData();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.$refs['queryForm'].resetFields();
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+  }
+};
+</script>