复杂参数

src/router/modules/manage.ts

@@ -35,6 +35,15 @@ export default {
       }
     },
     {
+      path: 'service',
+      name: 'ec921d5d-0141-41a5-b4e2-a6f169b7c089',
+      component: () => import('@/views/manage/service/index.vue'),
+      meta: {
+        title: '外部服务',
+        icon: 'circle'
+      }
+    },
+    {
       path: 'theme',
       name: '13d9ce7a-7f9e-4a3c-941a-376ff68d254c',
       component: () => import('@/views/manage/theme/index.vue'),

src/stores/dictionary-define.ts

@@ -20,6 +20,14 @@ export const dictionaryDefine = {
 	date_type: ['dateTypeList', 'dateTypeMap'], //  日期类型
 	search_status: ['searchStatusList', 'searchStatusMap'], //  搜索状态
 	relation_chart_layout: ['relationChartLayoutList', 'relationChartLayoutMap'], //  关系图谱布局
+	request_type: ['requestTypeList', 'requestTypeMap'], //  请求类型
+	request_params: ['requestParamsList', 'requestParamsMap'], //  Request_Params
+	fz_cs: ['fzCsList', 'fzCsMap'], //  复杂参数规则
+	request_body: ['RequestBodyList', 'RequestBodyMap'], //  Request_Body
+	response_body: ['Response_BodyList', 'Response_BodyMap'], //  Response_Body
+	qz_type: ['qzTypeList', 'qzTypeMap'], //  取值类型
+	format_type: ['formatTypeList', 'formatTypeMap'], //  格式类型
+	service_type: ['serviceTypeList', 'serviceTypeMap'], //  服务类型
 }
 
 const stateMap = {}

src/views/manage/service/complex-params.vue

@@ -0,0 +1,204 @@
+<template>
+  <CusDialog
+    :show="show"
+    :title="titleCpt"
+    @onClose="$emit('update:show', false)"
+    width="80%"
+    height="80%"
+    @onSubmit="onSubmit"
+    :loading="state.loading"
+  >
+    <div class="__cus-dialog-form">
+      <CusForm ref="ref_form" label-width="100px">
+        <CusFormColumn
+          :span="24"
+          required
+          type="textarea"
+          v-model:param="state.valueStr"
+          :rows="12"
+          :rules="[
+              {
+                handle: (val) => {
+                  try {
+                    const a = JSON.parse(val)
+                    return true
+                  } catch (e) {
+                    return false
+                  }
+                },
+                message: 'JSON结构异常'
+              }
+          ]"
+        />
+      </CusForm>
+      <div class="params-content">
+        <div class="request-params">
+          <div style="margin-bottom: 10px; display: flex">
+            <CusButton type="main" title="新增" @click="state.params.data.push({type: '2'})"/>
+            <CusButton type="main" title="正向解析JSON结构" style="margin-left: auto" @click="jsonToTable"/>
+            <CusButton type="main" title="逆向生成JSON结构" @click="tableToJson"/>
+          </div>
+          <CusTable
+            :data="state.params.data"
+            :table-head="state.params.tableHead"
+            :no-page="true"
+          >
+            <template #key-column-value="{scope}">
+              <CusFormColumn
+                class="__cus-table-form-column"
+                :span="24"
+                v-model:param="scope.row.key"
+              />
+            </template>
+            <template #type-column-value="{scope}">
+              <CusFormColumn
+                class="__cus-table-form-column"
+                :span="24"
+                v-model:param="scope.row.type"
+                link="select"
+                :options="DictionaryStore.fzCsList"
+                :clearable="false"
+                @change="(val) => scope.row.value = ''"
+              />
+            </template>
+            <template #value-column-value="{scope}">
+              <CusFormColumn
+                class="__cus-table-form-column"
+                :span="24"
+                v-model:param="scope.row.value"
+              />
+            </template>
+            <template #label-column-value="{scope}">
+              <CusFormColumn
+                class="__cus-table-form-column"
+                :span="24"
+                v-model:param="scope.row.label"
+              />
+            </template>
+            <template #do-column-value="{scope}">
+              <CusButton type="table-del" @click="state.params.data.splice(scope.$index, 1)"/>
+            </template>
+          </CusTable>
+        </div>
+      </div>
+    </div>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+
+const emit = defineEmits(['update:show', 'complex'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+ })
+const state: any = reactive({
+  valueStr: '',
+  loading: false,
+  params: {
+    tableHead: [
+      {value: "key", label: "键名"},
+      {value: "type", label: "类型", width: 160},
+      {value: "value", label: `取值（动态取值：\${变量名}）`},
+      {value: "label", label: "含义"},
+      {value: "do", label: "操作", width: 120, fixed: 'right'},
+    ],
+    data: []
+  }
+})
+const ref_form = ref()
+const titleCpt = computed(() => {
+  let t = '复杂参数规则'
+  return t
+})
+const onSubmit = () => {
+  if (state.params.data.length === 0) {
+    ElMessage.error('请完善参数信息！')
+    return
+  }
+  tableToJson()
+  setTimeout(() => {
+    let flag = state.params.data.every(v => proxy.$util.isValue(v.key) && proxy.$util.isValue(v.value))
+    if (!flag) {
+      ElMessage.error('请完善参数信息！')
+      return
+    }
+    ref_form.value.submit().then(() => {
+      ElMessageBox.confirm("是否提交?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      } as any).then(() => {
+        emit('update:show', false)
+        emit('complex', {
+          str: state.valueStr,
+          table: state.params.data
+        })
+      }).catch(() => {})
+    }).catch((e) => {
+      ElMessage({
+        message: e[0].message,
+        grouping: true,
+        type: 'warning',
+      })
+    })
+  }, 100)
+}
+const jsonToTable = () => {
+  try {
+    const json = JSON.parse(state.valueStr)
+    state.params.data = []
+    Object.entries(json).forEach(([k, v]) => {
+      state.params.data.push({
+        key: k, value: typeof v === 'object' ? JSON.stringify(v): v, type: '2'
+      })
+    })
+  } catch (e) {
+    ElMessage.error('JSON结构异常！')
+  }
+}
+const tableToJson = () => {
+  const obj = {}
+  state.params.data.forEach(v => {
+    obj[v.key] = v.value
+  })
+  state.valueStr = JSON.stringify(obj)
+}
+watch(() => props.show, (n) => {
+  if (n) {
+    state.loading = false
+    initDictionary()
+    state.valueStr = props.transfer.value ? JSON.parse(JSON.stringify(props.transfer.value)) : ''
+    state.params.data = props.transfer.valueTable ? [...props.transfer.valueTable] : []
+    nextTick(() => {
+      ref_form.value.reset()
+    })
+  }
+})
+const initDictionary = () => {
+  DictionaryStore.initDict('fz_cs')
+}
+</script>
+
+<style lang="scss" scoped>
+.__cus-dialog-form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.params-content {
+  flex: 1;
+  overflow: hidden;
+  .request-params {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

src/views/manage/service/detail.vue

@@ -0,0 +1,270 @@
+<template>
+  <CusDialog
+    :show="show"
+    :title="titleCpt"
+    @onClose="$emit('update:show', false)"
+    width="90%"
+    height="90%"
+    @onSubmit="onSubmit"
+    :loading="state.loading"
+  >
+    <div class="__cus-dialog-form">
+      <CusForm ref="ref_form" label-width="100px">
+        <CusFormColumn
+          :span="8"
+          required
+          label="数据服务名称"
+          label-width="120px"
+          v-model:param="state.form.themeName"
+        />
+        <CusFormColumn
+          :span="8"
+          required
+          label="归属插件"
+          v-model:param="state.form.themeType"
+          link="select"
+          :options="DictionaryStore.themeTypeList"
+        />
+        <CusFormColumn
+          :span="8"
+          required
+          label="插件类型"
+          v-model:param="state.form.themeState"
+          link="select"
+          :options="DictionaryStore.themeStatusList"
+          :disabled="true"
+        />
+        <CusFormColumn
+          :span="24"
+          required
+          v-model:param="state.form.themeName"
+        >
+          <template #prepend>
+            <el-select v-model="state.form.xx" placeholder="Select" style="width: 115px">
+              <template v-for="item in DictionaryStore.requestTypeList">
+                <el-option :label="item.dictLabel" :value="item.dictValue" />
+              </template>
+            </el-select>
+          </template>
+        </CusFormColumn>
+      </CusForm>
+      <CusTab :tabs="state.params.options" type="type1" v-model:param="state.params.tab"/>
+      <div class="params-content">
+        <template v-if="state.params.tab == 1">
+          <div class="request-params">
+            <CusButton type="main" title="新增" style="margin: 0 auto 10px 0;" @click="state.params.requestParams.data.push({key: '', type: '1', value: '', valueTable: []})"/>
+            <CusTable
+              :data="state.params.requestParams.data"
+              :table-head="state.params.requestParams.tableHead"
+              :no-page="true"
+            >
+              <template #key-column-value="{scope}">
+                <CusFormColumn
+                  class="__cus-table-form-column"
+                  :span="24"
+                  v-model:param="scope.row.key"
+                />
+              </template>
+              <template #type-column-value="{scope}">
+                <CusFormColumn
+                  class="__cus-table-form-column"
+                  :span="24"
+                  v-model:param="scope.row.type"
+                  link="select"
+                  :options="DictionaryStore.requestParamsList"
+                  :clearable="false"
+                  @change="(val) => (scope.row.value = '', scope.row.valueTable = [])"
+                />
+              </template>
+              <template #value-column-value="{scope}">
+                <CusFormColumn
+                  class="__cus-table-form-column"
+                  :span="24"
+                  v-model:param="scope.row.value"
+                  :readonly="scope.row.type == 3"
+                  @click="onClickComplexParams(scope.row, scope.$index)"
+                />
+              </template>
+              <template #label-column-value="{scope}">
+                <CusFormColumn
+                  class="__cus-table-form-column"
+                  :span="24"
+                  v-model:param="scope.row.label"
+                />
+              </template>
+              <template #do-column-value="{scope}">
+                <CusButton type="table-del" @click="state.params.requestParams.data.splice(scope.$index, 1)"/>
+              </template>
+            </CusTable>
+          </div>
+        </template>
+        <template v-else-if="state.params.tab == 2"></template>
+        <template v-else-if="state.params.tab == 3"></template>
+        <template v-else-if="state.params.tab == 4"></template>
+      </div>
+    </div>
+    <complexParams v-model:show="state.complexParams.show" :transfer="state.complexParams.transfer" @complex="getComplex"/>
+  </CusDialog>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
+import {useDictionaryStore} from "@/stores";
+import {ElMessage, ElMessageBox} from "element-plus";
+import complexParams from './complex-params.vue'
+
+const emit = defineEmits(['update:show', 'refresh'])
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const props = defineProps({
+  show: {default: false},
+  transfer: {}
+ })
+const state: any = reactive({
+  form: {},
+  loading: false,
+  params: {
+    tab: 1,
+    options: [
+      {name: 'Request Params', value: 1},
+      {name: 'Request Headers', value: 2},
+      {name: 'Request Body', value: 3},
+      {name: 'Response Body', value: 4},
+    ],
+    requestParams: {
+      tableHead: [
+        {value: "key", label: "键名"},
+        {value: "type", label: "类型", width: 160},
+        {value: "value", label: `取值（动态取值：\${变量名}）`},
+        {value: "label", label: "含义"},
+        {value: "do", label: "操作", width: 120, fixed: 'right'},
+      ],
+      data: []
+    }
+  },
+  complexParams: {
+    show: false,
+    transfer: {},
+    index: 0
+  }
+})
+const ref_form = ref()
+const titleCpt = computed(() => {
+  let t = ''
+  switch (props.transfer.mode) {
+    case 'add': t = '新增外部服务'
+      break
+    case 'edit': t = '编辑外部服务'
+      break
+  }
+  return t
+})
+const onSubmit = () => {
+  console.log(state.params.requestParams.data)
+  let flag = state.params.requestParams.data.every(v => proxy.$util.isValue(v.key) && proxy.$util.isValue(v.value))
+  if (!flag) {
+    ElMessage.error('请完善Request Params参数信息！')
+    state.params.tab = 1
+    return
+  }
+  ref_form.value.submit().then(() => {
+    ElMessageBox.confirm("是否提交?", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    } as any).then(() => {
+      state.loading = true
+      // const params = JSON.parse(JSON.stringify(state.form))
+      // if (params.themeType == '2') {
+      //   params.themeParam = params.themeParam.join(',')
+      // }
+      // if (props.transfer.mode === 'add') {
+      //   sysThemeAdd(params).then(res => {
+      //     ElMessage.success('新增成功！')
+      //     emit('update:show', false)
+      //     emit('refresh')
+      //     state.loading = false
+      //   }).catch(() => {
+      //     state.loading = false
+      //   })
+      // } else if (props.transfer.mode === 'edit') {
+      //   sysThemeUpdate(params).then(res => {
+      //     ElMessage.success('编辑成功！')
+      //     emit('update:show', false)
+      //     emit('refresh')
+      //     state.loading = false
+      //   }).catch(() => {
+      //     state.loading = false
+      //   })
+      // }
+    }).catch(() => {})
+  }).catch((e) => {
+    ElMessage({
+      message: e[0].message,
+      grouping: true,
+      type: 'warning',
+    })
+  })
+}
+const initDetail = () => {
+  state.loading = true
+  // sysThemeFind(props.transfer.id).then(res => {
+  //   state.form = res.data
+  //   if (state.form.themeType == '2') {
+  //     state.form.themeParam = state.form.themeParam.split(',')
+  //   }
+  //   state.loading = false
+  // })
+}
+const onClickComplexParams = (row, index) => {
+  if (row.type == 3) {
+    state.complexParams.transfer = {
+      value: row.value,
+      valueTable: row.valueTable,
+      index: index
+    }
+    state.complexParams.show = true
+  }
+}
+const getComplex = ({str, table}) => {
+  state.params.requestParams.data[state.complexParams.transfer.index].value = str
+  state.params.requestParams.data[state.complexParams.transfer.index].valueTable = table
+}
+watch(() => props.show, (n) => {
+  if (n) {
+    state.loading = false
+    initDictionary()
+    // if (props.transfer.mode === 'add') {
+    //   state.form = {}
+    // } else {
+    //   initDetail()
+    // }
+    // nextTick(() => {
+    //   ref_form.value.reset()
+    // })
+  }
+})
+const initDictionary = () => {
+  DictionaryStore.initDict('request_type')
+  DictionaryStore.initDict('request_params')
+}
+</script>
+
+<style lang="scss" scoped>
+.__cus-dialog-form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.params-content {
+  flex: 1;
+  margin-top: 20px;
+  overflow: hidden;
+  .request-params {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

src/views/manage/service/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="__cus-manage_content">
+    <div class="__cus-manage_content-title"><SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>{{$route.meta.title}}</div>
+    <div class="__cus-manage_content-filters">
+      <CusForm labelWidth="100px" @handleEnter="onSearch">
+        <CusFormColumn
+          :span="8"
+          v-model:param="state.query.form.xx"
+          placeholder="服务名称"
+        />
+        <CusFormColumn
+          :span="4"
+          label="所属插件"
+          v-model:param="state.query.form.xx"
+          link="select"
+          :options="DictionaryStore.trueFalseList"
+        />
+        <CusFormColumn
+          :span="4"
+          label="状态"
+          v-model:param="state.query.form.xx"
+          link="select"
+          :options="DictionaryStore.trueFalseList"
+        />
+        <CusButton type="main" title="搜索" @click="onSearch"/>
+        <CusButton type="main" title="重置" @click="onReset"/>
+        <CusButton type="main" title="新增" style="margin-left: auto" @click="onAdd"/>
+      </CusForm>
+    </div>
+    <div class="__cus-manage_content-main" v-loading="state.query.loading">
+      <CusTable
+        :page-num="state.query.page.pageNum"
+        :page-size="state.query.page.pageSize"
+        :total="state.query.result.total"
+        :data="state.query.result.data"
+        :table-head="state.query.tableHead"
+        @handlePage="onPage"
+      >
+        <template #shareMethod-column-value="{scope}">
+          {{DictionaryStore.gxMethodMap.get(scope.row.shareMethod)}}
+        </template>
+        <template #do-column-value="{scope}">
+          <CusButton type="table-edit" @click="onEdit(scope.row)"/>
+          <CusButton v-if="scope.row.xx == 1" type="table-edit" title="启用" @click="onEdit(scope.row)"/>
+          <CusButton v-else type="table-edit" title="停用" @click="onEdit(scope.row)"/>
+          <CusButton type="table-del" @click="onDel(scope.row)"/>
+          <CusButton type="table" icon="relation" title="关联主题" @click="onTheme(scope.row)"/>
+        </template>
+      </CusTable>
+    </div>
+    <DetailCom v-model:show="state.detail.show" :transfer="state.detail.transfer" @refresh="onSearch"/>
+<!--    <RelationCom v-model:show="state.relation.show" :transfer="state.relation.transfer" @refresh="onSearch"/>-->
+<!--    <TextCom v-model:show="state.text.show" :transfer="state.text.transfer"/>-->
+<!--    <ThemeCom v-model:show="state.theme.show" :transfer="state.theme.transfer"/>-->
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, onMounted, reactive} from "vue";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {
+  sysIndexCreateEsIndex,
+  sysIndexDeleteIndexById,
+  sysIndexExport,
+  sysIndexFindIndexByPage
+} from "@/api/modules/manage";
+import DetailCom from "./detail.vue";
+// import RelationCom from "./relation.vue";
+// import TextCom from "./text.vue";
+// import ThemeCom from "./theme.vue";
+import {useDictionaryStore} from "@/stores";
+
+const {proxy} = getCurrentInstance()
+const DictionaryStore = useDictionaryStore()
+const state: any = reactive({
+  query: {
+    loading: false,
+    page: {
+      pageNum: 1,
+      pageSize: 10
+    },
+    tableHead: [
+      {value: "x", label: "服务名称", fixed: 'left', width: 180},
+      {value: "x", label: "所属插件", width: 180},
+      {value: "x", label: "插件类型", width: 100},
+      {value: "x", label: "状态", width: 80},
+      {value: "createTime", label: "创建时间", width: 200},
+      {value: "createBy", label: "创建人"},
+      {value: "updateTime", label: "最后修改时间", width: 200},
+      {value: "updateBy", label: "最后修改人"},
+      {value: "do", label: "操作", width: 400, fixed: 'right'},
+    ],
+    form: {},
+    formReal: {},
+    result: {
+      total: 0,
+      data: []
+    }
+  },
+  detail: {
+    show: false,
+    transfer: {}
+  },
+  relation: {
+    show: false,
+    transfer: {}
+  },
+  text: {
+    show: false,
+    transfer: {}
+  },
+  theme: {
+    show: false,
+    transfer: {}
+  }
+})
+const onPage = (pageNum, pageSize) => {
+  state.query.page = {
+    pageNum: pageNum,
+    pageSize: pageSize
+  }
+  const params = {
+    page: state.query.page.pageNum,
+    size: state.query.page.pageSize,
+  }
+  //  添加表单参数
+  for (const [k, v] of Object.entries(state.query.formReal)) {
+    if (proxy.$util.isValue(v)) {
+      params[k] = v
+    }
+  }
+  state.query.loading = true
+  sysIndexFindIndexByPage(proxy.$util.formatGetParam(params)).then(res => {
+    state.query.result.total = res.data.totalElements
+    state.query.result.data = res.data.content
+    state.query.loading = false
+  })
+}
+const onSearch = () => {
+  state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
+  onPage(1, state.query.page.pageSize)
+}
+const onReset = () => {
+  state.query.page = {
+    pageNum: 1,
+    pageSize: 10
+  }
+  state.query.form = {}
+  onSearch()
+}
+const onRelation = (row) => {
+  state.relation.transfer = {
+    id: row.id
+  }
+  state.relation.show = true
+}
+const onTheme = (row) => {
+  state.theme.transfer = {
+    row: JSON.parse(JSON.stringify(row))
+  }
+  state.theme.show = true
+}
+const onAdd = () => {
+  state.detail.transfer = {
+    mode: 'add'
+  }
+  state.detail.show = true
+}
+const onEdit = (row) => {
+  state.detail.transfer = {
+    mode: 'edit',
+    id: row.id,
+  }
+  state.detail.show = true
+}
+const onDel = (row) => {
+  ElMessageBox.confirm(`请确认是否删除${row.indexName}?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  } as any).then(() => {
+    state.query.loading = true
+    sysIndexDeleteIndexById(row.id).then(res => {
+      ElMessage.success('删除成功！')
+      state.query.loading = false
+      onSearch()
+    })
+  }).catch(() => {})
+}
+const initDictionary = () => {
+  DictionaryStore.initDict('gx_method')
+}
+onMounted(() => {
+  initDictionary()
+  onReset()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>