simple-frame-unit 1.0.2

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

@@ -0,0 +1,203 @@
+<template>
+  <ed-drawer ref="BasicDrawer" :title="title"
+          :visible="visible"
+          ok-text="保存并关闭"
+          @close="closeDialog"
+          @ok="saveMock">
+    <el-form :key="dataId" ref="form" :model="form"
+             class="demo-form-inline">
+      <el-form-item label="是否启用Mock"
+                    prop="is_mock">
+        <el-switch v-model="form.is_mock"></el-switch>
+      </el-form-item>
+      <el-form-item label="接口请求数据"
+                    prop="requestData">
+        <ed-code-editor :value="form.requestData"
+                    language="javascript" @input="changeTextReq"></ed-code-editor>
+      </el-form-item>
+      <el-form-item
+        label="接口返回数据" prop="responseData">
+        <ed-code-editor ref="codeEditor" :value="form.responseData"
+                    language="javascript" @input="changeTextResp"></ed-code-editor>
+      </el-form-item>
+    </el-form>
+  </ed-drawer>
+</template>
+
+<script>
+import {getOneData, updateData, insertData} from "../../../../api/easyData";
+
+export default {
+  name: "InterfaceMock",
+  data() {
+    return {
+      dataId: '',
+      visible: false,
+      title: '',
+      row: {},
+      form: {requestData: '', responseData: '', is_mock: false},
+    }
+  },
+  methods: {
+    show(row, title) {
+      this.row = row
+      this.title = title
+      this.visible = true
+      this.initRequestData()
+    },
+    changeTextResp(val) {
+      this.form.responseData = val;
+    },
+    changeTextReq(val) {
+      this.form.requestData = val;
+    },
+    initRequestData() {
+      let param = {
+        dataSourceName: 'interface_params',
+        wheres: [{
+          fieldName: 'interface_id',
+          fieldValue: this.row.id,
+          operator: '='
+        }]
+      }
+      let interfaceParams = {}
+      getOneData(param).then((res) => {
+        if (res.success) {
+          if (res.data) {
+            let params = res.data.dataInfoArray
+            params.forEach((p) => {
+              interfaceParams[p.fieldName] = ''
+            })
+            this.initMockData(JSON.stringify(interfaceParams))
+          } else {
+            this.initMockData()
+          }
+        } else {
+          this.$message.warning(res.msg);
+        }
+      })
+    },
+    initMockData(requestData) {
+      if (this.row.id) {
+        let param = {
+          dataSourceName: 'interface_mock',
+          wheres: [{
+            fieldName: 'interface_id',
+            fieldValue: this.row.id,
+            operator: '='
+          }]
+        }
+        getOneData(param).then((res) => {
+          if (res.success) {
+            if (res.data) {
+              let result = res.data.keyInfoObject
+              this.dataId = res.data.id
+              this.form = Object.assign(result, {})
+              if (requestData) {
+                this.form.requestData = requestData
+              }
+            } else {
+              if (requestData) {
+                this.form.requestData = requestData
+              }
+            }
+          } else {
+            this.$message.warning(res.msg);
+          }
+        })
+      }
+    },
+    getFormData() {
+      //查询参数
+      let param = {}
+      param.dataSourceName = 'interface_mock'
+      param.key = {
+        interface_id: this.row.id,
+        is_mock: this.form.is_mock,
+        responseData: this.form.responseData
+      }
+      if (this.dataId) {
+        param.id = this.dataId
+      }
+      return param;
+    },
+    closeDialog() {
+      this.visible = false
+    },
+    saveMock() {
+      if (this.form.is_mock) {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            const loading = this.$loading({
+              lock: true,
+              text: 'Loading',
+              spinner: 'el-icon-loading',
+            });
+            const that = this;
+            let formData = this.getFormData()
+            if (this.dataId) {
+              updateData(formData).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.msg);
+                  this.visible = false
+                } else {
+                  that.$message.warning(res.msg);
+                }
+              }).finally(() => {
+                loading.close();
+              });
+            } else {
+              insertData(formData).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.msg);
+                  this.visible = false
+                } else {
+                  that.$message.warning(res.msg);
+                }
+              }).finally(() => {
+                loading.close();
+              });
+            }
+
+          }
+        })
+      } else {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+        });
+        const that = this;
+        let formData = this.getFormData()
+        if (formData.id) {
+          updateData(formData).then((res) => {
+            if (res.success) {
+              that.$message.success(res.msg);
+              this.visible = false
+            } else {
+              that.$message.warning(res.msg);
+            }
+          }).finally(() => {
+            loading.close();
+          });
+        } else {
+          insertData(formData).then((res) => {
+            if (res.success) {
+              that.$message.success(res.msg);
+              this.visible = false
+            } else {
+              that.$message.warning(res.msg);
+            }
+          }).finally(() => {
+            loading.close();
+          });
+        }
+
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,308 @@
+<template>
+  <ed-dialog ref="BasicDialog" :fullscreen="true" :showOkBtn="false" :title="title"
+          :visible="visibleMainDialog"
+          @close="closeMainDialog">
+
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>参数</span>
+        <el-button-group style="float: right;">
+          <el-button :loading="loading" icon="el-icon-document-add" size="small" type="primary"
+                     @click="saveFieldInfo">保存
+          </el-button>
+          <el-button :loading="loading" icon="el-icon-refresh-right" size="small"
+                     @click="refresh">刷新
+          </el-button>
+          <el-button :loading="loading" icon="el-icon-plus" size="small"
+                     @click="addParamObj">添加
+          </el-button>
+          <el-button :loading="loading" icon="el-icon-plus" size="small"
+                     @click="showAddParamFast">快速添加
+          </el-button>
+        </el-button-group>
+      </div>
+      <el-form ref="tableInfoForm" :inline="true" :model="tableInfoForm"
+               class="demo-form-inline">
+        <el-table
+          :data="tableInfoForm.params"
+          border>
+          <el-table-column
+            label="字段名称"
+            prop="fieldName"
+          >
+            <template slot-scope="scope">
+              <el-form-item :prop="`params[${scope.$index}].fieldName`"
+                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
+                <el-input v-model="scope.row.fieldName"
+                          placeholder="字段名称"></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="映射名称"
+            prop="mappingFieldName"
+          >
+            <template slot-scope="scope">
+              <el-form-item :prop="`params[${scope.$index}].mappingFieldName`"
+                            :rules="[{required: true, message: '必填', trigger: 'blur'}]">
+                <el-input v-model="scope.row.mappingFieldName"
+                          placeholder="字段映射"></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="字段类型"
+            prop="dataType"
+          >
+            <template slot-scope="scope">
+              <el-form-item>
+                <el-select v-model="scope.row.dataType">
+                  <el-option label="VARCHAR" value="VARCHAR"></el-option>
+                  <el-option label="INTEGER" value="INTEGER"></el-option>
+                  <el-option label="LONGTEXT" value="LONGTEXT"></el-option>
+                  <el-option label="DATETIME" value="DATETIME"></el-option>
+                  <el-option label="ARRAY" value="ARRAY"></el-option>
+                  <el-option label="OBJECT" value="OBJECT"></el-option>
+                </el-select>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="输入输出"
+            prop="paramType"
+          >
+            <template slot-scope="scope">
+              <el-form-item>
+                <el-select v-model="scope.row.paramType">
+                  <el-option label="输入参数" value="in"></el-option>
+                  <el-option label="输出参数" value="out"></el-option>
+                </el-select>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="默认值"
+            prop="defaultValue"
+          >
+            <template slot-scope="scope">
+              <el-form-item>
+                <el-input v-model="scope.row.defaultValue"
+                          placeholder="默认值"></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="备注"
+            prop="remark"
+            width="150">
+            <template slot-scope="scope">
+              <el-form-item>
+                <el-input v-model="scope.row.remark"
+                          placeholder="备注"></el-input>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="主键字段"
+            prop="primaryKey"
+            width="150">
+            <template slot-scope="scope">
+              <el-form-item>
+                <el-switch
+                  v-model="scope.row.primaryKey">
+                </el-switch>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="是否模糊匹配"
+            prop="isFuzzyMatch"
+          >
+            <template slot-scope="scope">
+              <el-form-item>
+                <el-switch
+                  v-model="scope.row.isFuzzyMatch">
+                </el-switch>
+              </el-form-item>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button slot="reference" style="color: red" type="text" @click="deleteRow(scope)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form>
+    </el-card>
+    <ed-dialog ref="BasicDialog" :showOkBtn="true" :visible="visible"
+            title="快速添加"
+            @close="closeDialog"
+            @ok="addParamObjFast">
+      <ed-code-editor
+        :value="fastText"
+        language="javascript"
+        placeholder="例:fieldName1|mappingFieldName1,fieldName2|mappingFieldName2,fieldName3|mappingFieldName3  以逗号分隔"
+        @input="changeText"
+      ></ed-code-editor>
+    </ed-dialog>
+  </ed-dialog>
+</template>
+
+<script>
+import {listFieldInfo, saveParams} from "../../../../api/interface";
+
+export default {
+  name: "InterfaceParam",
+  data() {
+    return {
+      loading: false,
+      visibleMainDialog: false,
+      visible: false,
+      title: '',
+      row: {},
+      tableInfoForm: {
+        params: []
+      },
+      fastText: '',
+      dataId: ''
+    }
+  },
+  methods: {
+    show(row, title) {
+      this.row = row
+      this.title = title
+      this.visibleMainDialog = true
+      this.showFieldInfo()
+    },
+    refresh() {
+      this.dataId = ''
+      this.fastText = ''
+      this.showFieldInfo()
+    },
+    saveFieldInfo() {
+      this.$refs['tableInfoForm'].validate((valid) => {
+        if (valid) {
+          let formData = {
+            dataSourceName: 'interface_params',
+            id: this.dataId,
+            key: {
+              interface_id: this.row.id
+            },
+            data: this.tableInfoForm.params,
+          }
+          // 发起请求
+          return this.requestAddOrEditFieldInfo(formData)
+        }
+      })
+    },
+    requestAddOrEditFieldInfo(formData) {
+      this.loading = true
+      let dataSourceId = this.row.id
+      formData.dataSourceId = dataSourceId
+      saveParams(formData).then((res) => {
+        if (res.success) {
+          // if (!this.dataId)
+          // this.dataId = res.data
+          this.$message.success(res.msg||'操作成功!');
+        } else {
+          this.$message.warning(res.msg||'操作失败!');
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    addParamObj() {
+      const paramObj = {
+        fieldName: '',
+        mappingFieldName: '',
+        dataType: 'VARCHAR',
+        paramType: 'in',
+        defaultValue: '',
+        remark: '',
+        primaryKey: false,
+        isFuzzyMatch: false
+      }
+      this.tableInfoForm.params.push(paramObj)
+    },
+    addParamObjFast() {
+      return new Promise((resolve, reject) => {
+        if (this.fastText) {
+          //解析dataQuick
+          let dataQ = this.fastText.split(',')
+          dataQ.forEach((d) => {
+            let fieldNames = d.split('|')
+            this.tableInfoForm.params.push({
+              fieldName: fieldNames[0],
+              mappingFieldName: fieldNames[1],
+              dataType: 'varchar',
+              isFuzzyMatch: true
+            })
+          })
+          this.visible = false
+          resolve()
+        } else {
+          this.$message.warning('输入框为空')
+        }
+      }).catch((e) => {
+        this.$message.warning(e)
+      });
+    },
+    showFieldInfo() {
+      //显示表信息
+      let params = {
+        dataSourceName: 'interface_params',
+        wheres: [
+          {
+            fieldName: 'interface_id',
+            fieldValue: this.row.id,
+            operator: '='
+          }
+        ]
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+      });
+      listFieldInfo(params).then(res => {
+        if (res.success) {
+          if (res.data) {
+            this.tableInfoForm.params = res.data.dataInfoArray
+            this.dataId = res.data.id
+          }
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        loading.close()
+      })
+    },
+    changeText(val) {
+      this.fastText = val
+    },
+    showAddParamFast() {
+      this.visible = true
+    },
+    deleteRow(data) {
+      if (data.row.id) {
+        this.deleteIds.push(data.row.id)
+      }
+      this.tableInfoForm.params.splice(data.$index, 1)
+    },
+    closeDialog() {
+      this.visible = false;
+    },
+    closeMainDialog() {
+      this.visibleMainDialog = false;
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item {
+  margin-bottom: 0px
+}
+
+</style>