ibsp-fg-page 4.0.2

package/src/views/designer/modules/headerWidgetModule/methodLib/index.vue

@@ -0,0 +1,551 @@
+<script setup>
+import {
+  ref,
+  onMounted,
+  reactive,
+  computed,
+  nextTick
+} from 'vue';
+
+//
+import { CloseBold, Plus } from '@element-plus/icons-vue'
+
+import PlatformLibLayout from '../components/PlatformLibLayout.vue';
+
+import { getPageFuncApi, saveOrUpdateFuncApi, deleteBatchFuncApi } from '@/api/ibsp-bg-app'
+
+const data = ref([])
+
+const tableColumn = ref([
+  {
+    prop: 'funcCode',
+    label: '编码',
+    align: 'center',
+  },
+  {
+    prop: 'funcName',
+    label: '名称',
+    align: 'center',
+  },
+  {
+    prop: 'funcBody',
+    label: '内容',
+    align: 'center',
+    slot: 'funcBody'
+  },
+  {
+    prop: 'remark',
+    label: '备注',
+    align: 'center',
+  },
+  {
+    prop: 'funcType',
+    label: '语言',
+    align: 'center',
+    width: '80px',
+    slot: 'funcType'
+  },
+  {
+    prop: 'createTime',
+    label: '创建日期',
+    align: 'center',
+  },
+  {
+    prop: 'updateTime',
+    label: '上次修改日期',
+    align: 'center',
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    slot: 'status',
+    align: 'center',
+    width: '80px'
+  },
+  {
+    prop: 'operation',
+    label: '操作',
+    slot: 'operation',
+    align: 'center',
+    width: computed(()=>param.value.state === 'platform' ? '80px' : '200px')
+  }
+
+
+])
+const param = ref({
+  state: 'platform', // 默认选择平台级
+  pageSize: 10,
+  pageNo: 1,
+  total: 0,
+  change: (pageNo)=>{
+    param.value.pageNo = pageNo
+    getData(param.value)
+  }
+})
+const funcForm = reactive(
+  {
+    funcType: '',
+    status: 'PT-PTK-ZT-QY',
+    funcName: '',
+    funcCode: '', // 返回值编码
+    funcExp: ' ', // 表达式
+    funcBody: '', // 方法体
+    id: '',
+    remark: '', // 备注
+    params: [], // 参数
+    returnType: '', // 返回值类型
+    returnName: '', // 返回值名称
+    returnCode: '', // 返回值code
+  }
+)
+const paramTypeOptions = [
+  {
+    label: '字符串',
+    value: 'PT-PTK-CSFHZLX-ZFC'
+  },
+  {
+    label: '整数',
+    value: 'PT-PTK-CSFHZLX-ZS'
+  },
+  {
+    label: '小数',
+    value: 'PT-PTK-CSFHZLX-XS'
+  },
+  {
+    label: '布尔',
+    value: 'PT-PTK-CSFHZLX-BOOL'
+  },
+  {
+    label: '对象',
+    value: 'PT-PTK-CSFHZLX-OBJ'
+  },
+  {
+    label: '数组',
+    value: 'PT-PTK-CSFHZLX-ARRAY'
+  },
+  {
+    label: '日期',
+    value: 'PT-PTK-CSFHZLX-DATE'
+  }
+]
+const paramNameRef = ref(null)
+const popupTitle = ref('新增方法')
+const openViewFunc = ref(false)
+const popupState = reactive({
+  open: false,
+  width: '50%',
+  height: '60%',
+  title: computed(()=>popupTitle.value),
+  slot: 'add',
+})
+/** 清空 */
+const clearFuncForm = ()=>{
+  funcForm.funcType = 'PT-PTK-FFLX-JS'
+  funcForm.status = 'PT-PTK-ZT-QY'
+  funcForm.funcName = ''
+  funcForm.funcCode = ''
+  funcForm.funcBody = ' '
+  funcForm.remark = ''
+  funcForm.id = ''
+  funcForm.params = []
+  funcForm.returnType = ''
+  funcForm.returnName = ''
+  funcForm.returnCode = ''
+}
+const statusOptions = {
+  'PT-PTK-ZT-JY': '禁用',
+  'PT-PTK-ZT-QY': '启用'
+}
+// PT-PTK-ZT-JY : 禁用  PT-PTK-ZT-QY: 启用
+const funcFormRules = reactive(Object.keys(funcForm).reduce((pre, cur)=>{
+  // 排除不需要校验的必填字段
+  if (['remark', 'returnType', 'returnName', 'returnCode'].includes(cur)) {
+    return pre
+  }
+  pre[cur] = [
+    { required: true, message: '请输入', trigger: 'blur' }
+  ]
+  return pre
+}, {})
+)
+/** 提交 */
+const onSubmit = ()=>{
+  saveOrUpdateFuncApi(funcForm).then((res)=>{
+    if (res?.success) {
+      ElMessage.success('保存成功')
+      getData(param.value)
+    }
+  })
+  popupState.open = false
+  clearFuncForm()
+}
+
+/** 取消 */
+const onClickCancel = ()=>{
+  popupState.open = false
+  clearFuncForm()
+}
+
+/** 编辑按钮 */
+const onClickEditBtn = (row)=>{
+  popupTitle.value = '编辑方法'
+  popupState.open = true
+  funcForm.funcType = row.funcType
+  funcForm.status = row.status
+  funcForm.funcName = row.funcName
+  funcForm.funcCode = row.funcCode
+  funcForm.funcBody = row.funcBody
+  funcForm.remark = row.remark
+  funcForm.id = row.id
+  funcForm.params = row.params
+  funcForm.returnType = row.returnType
+  funcForm.returnName = row.returnName
+  funcForm.returnCode = row.returnCode
+}
+/** 删除 */
+const onClickDelBtn = (row)=>{
+  ElMessageBox.confirm('此操作将永久删除该方法, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    // 删除
+    deleteBatchFuncApi([row.id]).then((res)=>{
+      if (res?.success) {
+        ElMessage.success('删除成功')
+        getData(param.value)
+      }
+    })
+  })
+    .catch(() => {
+      ElMessage.info('已取消删除')
+    })
+}
+const currentViewFuncValue = ref('')
+/** 查看脚本 */
+const onClickViewFunc = (row)=>{
+  currentViewFuncValue.value = row.funcBody
+  openViewFunc.value = true
+}
+/** 关闭预览弹窗 */
+const onCloseView = ()=>{
+  currentViewFuncValue.value = ''
+  openViewFunc.value = false
+}
+/** */
+const formatDateTime = (dd) => {
+  if (!dd) {
+    return dd
+  }
+  const date = new Date(dd)
+  const y = date.getFullYear()
+  const m = date.getMonth() + 1
+  const d = date.getDate()
+  return `${y}年${m}月${d}日`
+}
+
+/**
+ *
+ */
+const getData = (param)=>{
+  getPageFuncApi({
+    appId: param.state === 'platform' ? '' : window.appId,
+    pageSize: param.pageSize,
+    pageNo: param.pageNo,
+  }).then((res)=>{
+    if (res?.data?.records) {
+      data.value = res.data.records.map(item=>{
+        return {
+          ...item,
+          createTime: formatDateTime(item.createTime),
+          updateTime: formatDateTime(item.updateTime),
+        }
+      })
+      param.total = res.data.total
+    }
+  })
+}
+/** */
+const onChangeSearch = (value)=>{
+  getData({
+    ...param.value,
+    scriptName: value
+  })
+}
+const getTools = computed(()=>{
+  return [
+    {
+      type: 'search',
+      placeholder: '请输入方法名称',
+      label: '搜索方法(名称)',
+      value: '',
+      style: {
+        width: '50%'
+      },
+      show: true,
+      change: onChangeSearch
+    },
+    {
+      type: 'add',
+      label: '新增',
+      show: (state = param.value.state)=>state === 'app',
+      popupState: popupState,
+      click: ()=>{
+        popupState.open = true
+      }
+    }
+  ]
+})
+
+/** */
+const onSelectMenu = (id) => {
+  param.value.state = id
+  getData(param.value)
+}
+
+/** 删除一行参数 */
+const onClickDelRowParams = (index)=>{
+  funcForm.params.splice(index, 1)
+}
+
+/** 添加一行参数 */
+const onClickAddRowParams = ()=>{
+  funcForm.params.push({
+    paramName: '',
+    paramCode: '',
+    paramType: 'PT-PTK-CSFHZLX-ZFC',
+    remark: ''
+  })
+  nextTick(()=>{
+    paramNameRef.value.focus()
+  })
+}
+
+
+onMounted(()=>{
+  getData(param.value)
+})
+
+</script>
+
+<template>
+  <div class="func-lib">
+
+    <PlatformLibLayout :data="data"
+                       v-model="param.state"
+                       :data-columns="tableColumn"
+                       @onSearch="onChangeSearch"
+                       :tools="getTools"
+                       :pagePrams="param"
+                       @onSelect="onSelectMenu">
+      <template #status="{row}">
+        <el-tag :type="row.status === 'PT-PTK-ZT-JY'?'info':'success'">{{ statusOptions[row.status] }}</el-tag>
+      </template>
+      <template #funcBody="{row}">
+        <span class="func-body">{{ row.funcBody }} </span>
+      </template>
+      <template #funcType="{row}">
+        <span>{{ row.funcType?.split('-')?.at?.(-1) || row.funcType }} </span>
+      </template>
+      <template #operation="{row}">
+        <el-button
+          v-if="param.state === 'app'"
+          size="small"
+          type="primary"
+          @click="onClickEditBtn(row)"
+        >编辑</el-button>
+        <el-button
+          v-if="param.state === 'app'"
+          size="small"
+          type="danger"
+          @click="onClickDelBtn(row)"
+        >删除</el-button>
+        <el-button
+          size="small"
+          type="success"
+          @click="onClickViewFunc(row)"
+        >查看</el-button>
+      </template>
+      <template #add>
+        <el-form
+          ref="ruleFormRef"
+          :model="funcForm"
+          :rules="funcFormRules"
+          label-width="100px"
+          class="func-lib-form"
+        >
+          <el-form-item label="类型" prop="funcType" >
+            <el-radio-group v-model='funcForm.funcType'>
+              <el-radio label="PT-PTK-FFLX-JAVA">JAVA</el-radio>
+              <el-radio label="PT-PTK-FFLX-JS" >JS</el-radio>
+              <el-radio label="PT-PTK-FFLX-PYTHON">PYTHON</el-radio >
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="状态" prop="status" >
+            <el-radio-group v-model='funcForm.status'>
+              <el-radio label="PT-PTK-ZT-QY" >{{ statusOptions['PT-PTK-ZT-QY'] }}</el-radio>
+              <el-radio label="PT-PTK-ZT-JY" >{{ statusOptions['PT-PTK-ZT-JY'] }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="名称" prop="funcName" >
+            <el-input v-model='funcForm.funcName' />
+          </el-form-item>
+          <el-form-item label="编码" prop="funcCode" >
+            <el-input v-model='funcForm.funcCode' />
+          </el-form-item>
+          <el-form-item label="方法参数"
+                        prop="params"
+          >
+            <el-table
+              :data="funcForm.params"
+              max-height="200px"
+              style="width: 100%">
+              <el-table-column label="参数名" >
+                <template #default="{row}">
+                  <el-input ref="paramNameRef"
+                            clearable
+                            v-model="row.paramName"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="参数编码" >
+                <template #default="{row}">
+                  <el-input clearable v-model="row.paramCode"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="参数类型">
+                <template #default="{row}">
+                  <el-select v-model="row.paramType"
+                             clearable
+                             placeholder="请选择">
+                    <el-option
+                      v-for="item in paramTypeOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="描述" >
+                <template #default="{row}">
+                  <el-input clearable  v-model="row.remark"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作">
+                <template #default="{$index}">
+                  <el-icon class="func-lib-operation-del-row" @click="onClickDelRowParams($index)"><CloseBold /></el-icon>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-row class="func-lib-add-row">
+              <el-tooltip
+                effect="dark"
+                content="添加参数"
+                placement="top-start"
+              >
+                <el-icon @click="onClickAddRowParams"><Plus /></el-icon>
+              </el-tooltip>
+
+            </el-row>
+          </el-form-item>
+          <el-form-item label="方法体"
+                        prop="funcBody"
+                        class="func-lib-add-content">
+                        <!-- <MonacoEditor v-model='funcForm.funcBody' /> -->
+          </el-form-item>
+          <el-form-item label="返回值名称" prop="returnName" >
+            <el-input v-model='funcForm.returnName' />
+          </el-form-item>
+          <el-form-item label="返回值编码" prop="returnCode" >
+            <el-input v-model='funcForm.returnCode' />
+          </el-form-item>
+          <el-form-item label="返回值类型" prop="returnType" >
+            <el-radio-group v-model='funcForm.returnType'>
+              <el-radio :label="item.value"
+                        v-for="item in paramTypeOptions"
+                        :key="item.value">{{ item.label }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="备注" prop="remark" >
+            <el-input v-model='funcForm.remark' />
+          </el-form-item>
+        </el-form>
+        <el-form-item class="func-lib-add-submit">
+          <el-button class="ok-btn"
+                     type="primary"
+                     @click="onSubmit">确认</el-button>
+          <el-button class="cancel-btn" @click="onClickCancel">取消</el-button>
+        </el-form-item>
+      </template>
+    </PlatformLibLayout>
+
+    <!-- <MonacoEditor @onCloseView="onCloseView"
+                  :isView="true"
+                  :open-view="openViewFunc"
+                  v-model="currentViewFuncValue" /> -->
+
+
+  </div>
+</template>
+
+<style lang="less" scoped>
+.func-lib {
+  width: 100%;
+  height: 100%;
+  .func-body{
+    //超出两行显示省略号
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+
+}
+</style>
+
+<style lang="less">
+.func-lib-add-row{
+  width: 100%;
+    display: flex;
+    justify-content: center;
+
+    .el-icon{
+      cursor: pointer;
+      transition: .4s;
+      &:hover{
+        color: #409EFF;
+        transform: scale(1.4);
+      }
+    }
+}
+.func-lib-form{
+      position: relative;
+      height:calc(100% - 55px);
+    overflow: auto;
+
+    }
+    .func-lib-add-submit{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+.func-lib-operation-del-row{
+  cursor: pointer;
+      transition: .4s;
+      &:hover{
+        color: #409EFF;
+        transform: scale(1.4);
+      }
+}
+.func-lib-add-content{
+  .el-form-item__content{
+    height: 150px !important;
+    margin-bottom: 30px;
+    border: 1px solid var(--theme-border-color);
+    border-radius: 2px;
+
+      }
+}
+</style>