simple-frame-unit 1.0.2

package/lib/pages/Interface/src/components/InterfaceRepeat.vue

@@ -0,0 +1,281 @@
+<template>
+  <ed-drawer ref="BasicDialog" :fullscreen="false" :showOkBtn="true" :visible="visible" size="60%"
+          title="接口循环配置"
+          @close="closeDialog"
+          @ok="handleSubmit">
+    <el-form ref="tableInfoForm" :inline="false" :model="form"
+             class="demo-form-inline" label-position="left">
+      <el-form-item label="循环依赖" label-width="100px">
+        <el-table :data="form.callRecord"
+                  border>
+          <el-table-column label="字段名称" prop="fieldName" width="150">
+          </el-table-column>
+          <el-table-column label="输入输出" prop="paramType" width="150">
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" width="150">
+          </el-table-column>
+          <el-table-column label="比较符" prop="operator" width="150">
+            <template slot-scope="scope">
+              <el-form-item :prop="`callRecord[${scope.$index}].operator`"
+                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
+                <el-select v-model="scope.row.operator">
+                  <el-option v-for="item in operatorOptions" :key="item.value" :label="item.label"
+                             :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="值" prop="operatorValue" width="150">
+            <template slot-scope="scope">
+              <el-form-item :prop="`callRecord[${scope.$index}].operatorValue`"
+                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
+                <el-input v-model="scope.row.operatorValue"></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" prop="body" width="150">
+            <template slot-scope="scope">
+              <el-button slot="reference" style="color: red" type="text" @click="deleteCallRow(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item label="参数传递" label-width="100px">
+        <el-table :data="form.transferRecord"
+                  border>
+          <el-table-column label="字段名称" prop="fieldName" width="150">
+          </el-table-column>
+          <el-table-column label="输入输出" prop="paramType" width="150">
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" width="150">
+          </el-table-column>
+          <el-table-column label="传递参数" prop="transferParam" width="150">
+            <template slot-scope="scope">
+              <el-form-item :prop="`transferRecord[${scope.$index}].transferParam`"
+                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
+                <el-select v-model="scope.row.transferParam">
+                  <el-option v-for="item in transferParamOptions" :key="item.value" :label="item.label"
+                             :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="表达式" prop="expression" width="150">
+            <template slot-scope="scope">
+              <el-form-item :prop="`transferRecord[${scope.$index}].expression`"
+                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
+                <el-input v-model="scope.row.expression"></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" prop="body" width="150">
+            <template slot-scope="scope">
+              <el-button slot="reference" style="color: red" type="text" @click="deleteTransRow(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
+  </ed-drawer>
+</template>
+
+<script>
+import {insertDataByObj, selectDataList, updateDataByObj} from "../../../../api/easyData";
+import {pick}                                             from 'lodash'
+
+export default {
+  name: "InterfaceDepend",
+  data() {
+    return {
+      row: {},
+      visible: false,
+      form: {},
+      visibleChoose: false,
+      transferParamOptions: [],
+      dataId: "",
+      operatorOptions: [ // 下拉选项
+        {
+          title: '=',
+          value: '=='
+        }, {
+          title: '>',
+          value: '>'
+        }, {
+          title: '<',
+          value: '<'
+        }, {
+          title: '<=',
+          value: '<='
+        }, {
+          title: '>=',
+          value: '>='
+        }, {
+          title: '!=',
+          value: '!='
+        }, {
+          title: 'is null',
+          value: '==null'
+        }, {
+          title: 'is not null',
+          value: '!=null'
+        }
+      ],
+    };
+  },
+  methods: {
+    initParams() {
+      this.getInterfaceParams(this.row.id).then(res => {
+        res.forEach(r => {
+          if (r.paramType === 'in') {
+            this.transferParamOptions.push({
+              label: r.remark + '|' + r.fieldName,
+              value: r.fieldName,
+            })
+          }
+        })
+      })
+      //加载接口依赖
+      this.getInterfaceRepeat()
+    },
+    getInterfaceRepeat() {
+      //显示表信息
+      let params = {
+        dataSourceName: 'interface_repeat',
+        whereList: [
+          {
+            fieldName: 'interface_id',
+            fieldValue: this.row.id,
+            operator: '='
+          }
+        ]
+      }
+      selectDataList(params).then(res => {
+        if (res.success) {
+          if (res.data && res.data.length > 0) {
+            let fieldsVal = pick(JSON.parse(res.data[0].key_info), 'depend_interface_name', 'depend_interface_id');
+            this.$nextTick(() => {
+              this.form = {...this.form, ...fieldsVal}
+            });
+            this.form.callRecord = JSON.parse(res.data[0].data_info).callRecord
+            this.form.transferRecord = JSON.parse(res.data[0].data_info).transferRecord
+            this.dataId = res.data[0].id
+          } else {
+            this.getInterfaceParams(this.row.id).then(res => {
+              this.$set(this.form, 'callRecord',Object.assign([], res))
+              this.$set(this.form, 'transferRecord',Object.assign([], res))
+            })
+          }
+        } else {
+          this.$message.warning(res.msg)
+        }
+      })
+    },
+    getInterfaceParams(interfaceId) {
+      let param = {
+        dataSourceName: 'interface_params',
+        whereList: [{
+          fieldName: 'interface_id',
+          fieldValue: interfaceId,
+          operator: '='
+        }]
+      }
+      let that = this
+      return new Promise((resolve, reject) => {
+        selectDataList(param).then((res) => {
+          if (res.success) {
+            if (res.data.length > 0) {
+              let params = JSON.parse(res.data[0].data_info)
+              resolve(params)
+            }
+          } else {
+            that.$message.warning(res.msg);
+          }
+        })
+      })
+    },
+    chooseValue(value) {
+      if (!value) {
+        return
+      }
+      let fieldsVal = {
+        'depend_interface_name': value.label,
+        'depend_interface_id': value.value
+      };
+      this.form = {...this.form, ...fieldsVal}
+      this.$nextTick(() => {
+        this.form = {...this.form, ...fieldsVal}
+        this.getInterfaceParams(fieldsVal.depend_interface_id).then(res => {
+          this.$set(this.form, 'callRecord', Object.assign([], res))
+          this.$set(this.form, 'transferRecord', Object.assign([], res))
+        })
+      });
+    },
+    handleSubmit() {
+      this.$refs['tableInfoForm'].validate((valid) => {
+        if (valid) {
+          //调用依赖
+          let callRecord = this.form.callRecord
+          let transferRecord = this.form.transferRecord
+          //验证成功后保存数据
+          let formData = {
+            dataSourceName: 'interface_repeat',
+            id: this.dataId,
+            keyInfo: JSON.stringify({
+              interface_id: this.row.id
+            }),
+            dataInfo: JSON.stringify({callRecord: callRecord, transferRecord: transferRecord}),
+          }
+          if (this.dataId) {
+            updateDataByObj(formData).then((res) => {
+              if (res.success) {
+                if (!this.dataId) {
+                  this.dataId = res.data
+                }
+                this.$message.success(res.msg || "操作成功!");
+                this.visible = false;
+              } else {
+                this.$message.warning(res.msg);
+              }
+              this.loading = false
+            }).finally(() => {
+            })
+          } else {
+            insertDataByObj(formData).then((res) => {
+              if (res.success) {
+                if (!this.dataId) {
+                  this.dataId = res.data
+                }
+                this.$message.success(res.msg || "操作成功!");
+                this.visible = false;
+              } else {
+                this.$message.warning(res.msg);
+              }
+            }).finally(() => {
+            })
+          }
+
+        }
+      })
+
+    },
+    show(row) {
+      this.row = row
+      this.visible = true;
+      this.initParams()
+      this.chooseValue()
+    },
+    closeDialog() {
+      this.visible = false;
+    },
+    deleteCallRow(data) {
+      this.form.callRecord.splice(data.$index, 1)
+    },
+    deleteTransRow(data) {
+      this.form.transferRecord.splice(data.$index, 1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

package/lib/pages/Interface/src/components/InterfaceVariable.vue

@@ -0,0 +1,31 @@
+<template>
+  <ed-dialog ref="BasicDialog" :fullscreen="true" :showOkBtn="false" :visible="visible"
+             title="接口变量管理"
+             @close="closeDialog">
+    <easy-data-list ref="EasyDataList" :data-source-name="dataSourceName"></easy-data-list>
+  </ed-dialog>
+</template>
+
+<script>
+
+export default {
+  name: "InterfaceVariable",
+  data() {
+    return {
+      visible: false,
+      dataSourceName: 'interface_variable'
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true;
+    },
+    closeDialog() {
+      this.visible = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <easy-data-list ref="EasyDataList" :data-source-name="dataSourceName" :action-props="{showExportBtn:false}" :tableProps="{operateFixed: 'right'}">
+      <template v-slot:tableSlot="{row, $index}">
+        <div class="operation" data-width="200">
+          <el-button size="mini" type="text" @click="$refs.EasyDataList.handlerEdit(row, $index)">编辑</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="mini" type="text" @click="copyInterface(row)">复制</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <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 v-if="isDepend(row)" @click.native="showDepend('接口依赖',row)">接口依赖
+              </el-dropdown-item>
+              <el-dropdown-item v-if="isRepeat(row)" @click.native="showRepeat('接口循环',row)">接口循环
+              </el-dropdown-item>
+              <el-dropdown-item v-if="isCustom(row)" @click.native="showMessage('报文配置',row)">报文配置
+              </el-dropdown-item>
+              <el-dropdown-item @click.native="showParam('接口参数配置',row)">接口参数配置</el-dropdown-item>
+              <el-dropdown-item @click.native="showMock('Mock',row)">Mock</el-dropdown-item>
+              <el-dropdown-item @click.native="showFee('计费配置',row)">计费配置</el-dropdown-item>
+              <el-dropdown-item @click.native="exportConfig(row)">导出配置</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-divider direction="vertical"></el-divider>
+          <el-popconfirm :title="apiName(row)" @confirm="deleteInterface(row)">
+            <el-button slot="reference" size="small" style="color: red" type="text">删除</el-button>
+          </el-popconfirm>
+        </div>
+      </template>
+      <template v-slot:extra>
+        <el-button plain size="small" type="primary" @click="showVariable">接口变量</el-button>
+        <el-button plain size="small" type="primary" @click="showCell">接口调用</el-button>
+        <el-upload :file-list="fileList" :http-request="importInterface" :limit="1" :multiple="false"
+                   :show-file-list="false" action="" style="display: inline-block;margin: 0 10px">
+          <el-button :loading="operLoading" icon="el-icon-upload2" plain size="small" type="primary">导入</el-button>
+        </el-upload>
+        <!--        <el-button plain size="small" type="primary">Token管理</el-button>-->
+      </template>
+      <!--      <template v-slot:rowKeySlot>-->
+      <!--        <a @click="rowKeyClick()">哈哈</a>-->
+      <!--      </template>-->
+    </easy-data-list>
+    <InterfaceMessage ref="InterfaceMessage"></InterfaceMessage>
+    <InterfaceParam ref="InterfaceParam"></InterfaceParam>
+    <InterfaceMock ref="InterfaceMock"></InterfaceMock>
+    <InterfaceFee ref="InterfaceFee"></InterfaceFee>
+    <InterfaceVariable ref="InterfaceVariable"></InterfaceVariable>
+    <InterfaceCall ref="InterfaceCall"></InterfaceCall>
+    <InterfaceDepend ref="InterfaceDepend"></InterfaceDepend>
+    <InterfaceRepeat ref="InterfaceRepeat"></InterfaceRepeat>
+
+  </div>
+</template>
+
+<script lang="jsx">
+import InterfaceMessage from "./components/InterfaceMessage";
+import InterfaceParam from "./components/InterfaceParam";
+import InterfaceMock from "./components/InterfaceMock";
+import InterfaceFee from "./components/InterfaceFee";
+import InterfaceVariable from "./components/InterfaceVariable";
+import InterfaceCall from "./components/InterfaceCall";
+import InterfaceDepend from "./components/InterfaceDepend";
+import InterfaceRepeat from "./components/InterfaceRepeat";
+import {copyInterface, deleteInterface, exportFile, importInterface} from '../../../api/interface'
+
+export default {
+  name: "Interface",
+  components: {
+    InterfaceMessage,
+    InterfaceParam,
+    InterfaceMock,
+    InterfaceFee,
+    InterfaceVariable,
+    InterfaceCall,
+    InterfaceDepend,
+    InterfaceRepeat
+  },
+  data() {
+    return {
+      dataSourceName: 'interface_info',
+      title: '',
+      row: {},
+      fileList: [],
+      operLoading: false,
+    }
+  },
+  computed: {
+    isDepend() {
+      return ({key, keyInfo, keyInfoObject}) => {
+        let data = keyInfoObject ? keyInfoObject : keyInfo ? keyInfo : key
+        return data.hasOwnProperty('is_depend') && data.is_depend.value === '1'
+      }
+    },
+    isRepeat() {
+      return ({key, keyInfo, keyInfoObject}) => {
+        let data = keyInfoObject ? keyInfoObject : keyInfo ? keyInfo : key
+        return data.hasOwnProperty('is_repeat') && data.is_repeat.value === 'true'
+      }
+    },
+    isCustom() {
+      return ({key, keyInfo, keyInfoObject}) => {
+        let data = keyInfoObject ? keyInfoObject : keyInfo ? keyInfo : key
+        return data.hasOwnProperty('is_custom') && data.is_custom !== 'customize'
+      }
+    }
+  },
+  methods: {
+    importInterface(param) {
+      let reader = new FileReader(); //新建一个FileReader
+      reader.readAsText(param.file, "UTF-8"); //读取文件
+      reader.onload = (evt) => { //读取完文件之后会回来这里
+        this.operLoading = true;
+        let fileString = evt.target.result; // 读取文件内容
+        importInterface(fileString).then((resp) => {
+          this.$message.success(resp.data || "操作成功!")
+          this.fileList = []
+          this.loadData()
+        }).finally(() => {
+          this.operLoading = false;
+        })
+      }
+    },
+    copyInterface(row) {
+      this.$refs.EasyDataList.initLoading = true
+      const param = {apiId: row.id, apiName: row.keyInfoObject.api_name}
+      copyInterface(param).then((resp) => {
+        if (resp.success) {
+          this.$message.success(resp.msg || "操作成功!")
+          this.loadData()
+        }
+      }).finally(() => {
+        this.$refs.EasyDataList.initLoading = false
+      })
+    },
+    deleteInterface(row) {
+      this.$refs.EasyDataList.initLoading = true
+      const param = {apiId: row.id, apiName: row.keyInfoObject.api_name}
+      deleteInterface(param).then((resp) => {
+        if (resp.success) {
+          this.$message.success(resp.msg || "操作成功!")
+          this.loadData()
+        }
+      }).finally(() => {
+        this.$refs.EasyDataList.initLoading = false
+      })
+    },
+    loadData() {
+      this.$refs.EasyDataList.loadTableData()
+    },
+    showDepend(title, row) {
+      this.$refs.InterfaceDepend.show(row, title)
+    },
+    showRepeat(title, row) {
+      this.$refs.InterfaceRepeat.show(row, title)
+    },
+    showMessage(title, row) {
+      this.$refs.InterfaceMessage.show(row, title)
+    },
+    showParam(title, row) {
+      this.$refs.InterfaceParam.show(row, title)
+    },
+    showFee(title, row) {
+      this.$refs.InterfaceFee.show(row, title)
+    },
+    showMock(title, row) {
+      this.$refs.InterfaceMock.show(row, title)
+    },
+    showVariable() {
+      this.$refs.InterfaceVariable.show()
+    },
+    showCell() {
+      this.$refs.InterfaceCall.show()
+    },
+    exportConfig(record) {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+      });
+      let apiIds = []
+      apiIds.push(record.id)
+      let fileName = "接口_" + record.keyInfo.api_name
+      exportFile(apiIds).then((res) => {
+        if (res.success) {
+          let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/json'}))
+          let link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.setAttribute('download', fileName + '.tex')
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link); //下载完成移除元素
+          window.URL.revokeObjectURL(url); //释放掉blob对象
+          this.$message.success(res.msg)
+        } else {
+          this.$message.error(res.msg)
+        }
+      }).finally(() => {
+        loading.close()
+      })
+    },
+    apiName({key, keyInfo, keyInfoObject}) {
+      let data = keyInfoObject ? keyInfoObject : keyInfo ? keyInfo : key
+      let name = data.hasOwnProperty('api_name') ? data.api_name : ""
+      return `确定删除[ ${name} ]该接口吗？`
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/lib/pages/Template/index.js

@@ -0,0 +1,8 @@
+import TemplateList from './src/index.vue'
+
+/* istanbul ignore next */
+TemplateList.install = function (Vue) {
+  Vue.component(TemplateList.name, TemplateList)
+}
+
+export default TemplateList