|
|
@@ -0,0 +1,550 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <PageMain class="vh100">
|
|
|
+ <ElRow :gutter="20" style="height: 100%;">
|
|
|
+ <ElCol :md="4">
|
|
|
+ <div class="flex f-c " style="height: 100%;">
|
|
|
+ <ElFormItem>
|
|
|
+ <ElInput v-model="companyName" placeholder="输入保险公司名称查找" type="text" tabindex="1" clearable
|
|
|
+ style="width: 100%;" @clear="companyQuery">
|
|
|
+ <template #append>
|
|
|
+ <el-button :icon="Search" @click="companyQuery" v-auth="'drivingInsurance.add'" />
|
|
|
+ </template>
|
|
|
+ </ElInput>
|
|
|
+ </ElFormItem>
|
|
|
+ <div style=" width: 100%;height: calc(100vh - 310px); overflow-y: auto;" class="container ">
|
|
|
+ <div class="pad-1 roleitem " :class="{ active: companyactiveID === item.id }"
|
|
|
+ v-for="(item, index) in companyList" :key="index" @click="roleitemClick(item)">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="1" style="flex: unset;">
|
|
|
+ <ElDivider direction="vertical" style="height: 100%;"></ElDivider>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="19">
|
|
|
+ <ElCol :md="24" :lg="24" :offset="23" v-if="companyactiveID">
|
|
|
+ <el-button type="primary" @click="parametervalidate(productFormRef)">保存</el-button>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="24">
|
|
|
+ <el-tabs v-model="editableTabsValue" type="card" editable class="demo-tabs" @edit="handleTabsEdit"
|
|
|
+ :closable="editableTabs.length == 1 ? false : true">
|
|
|
+ <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name"
|
|
|
+ style=" height: 550px;overflow-y: auto;">
|
|
|
+ <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
|
|
|
+ <span class="strong">基本信息</span>
|
|
|
+ </ElCol>
|
|
|
+ <el-form :model="item" label-width="120px" :rules="parameterrules" label-position="top"
|
|
|
+ ref="productFormRef" style="max-width: 1000px;" class="flex a-c f-wrap" :size="fromSize">
|
|
|
+ <ElCol :md="24" :lg="12">
|
|
|
+ <el-form-item label="对接方式" prop="apiType">
|
|
|
+ <el-select v-model="item.apiType" placeholder="请选择对接方式" clearable filterable>
|
|
|
+ <el-option v-for="(item, index) in dictLists.api_typeList" :label="item.label"
|
|
|
+ :value="item.value" :key="index" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="保司账号登录地址" prop="attributionConfig">
|
|
|
+ <el-input v-model="item.attributionConfig" placeholder="输入账号登录地址" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="报价链接" prop="quotation">
|
|
|
+ <el-input v-model="item.quotation" placeholder="输入报价链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="影像上传链接" prop="imageUpload">
|
|
|
+ <el-input v-model="item.imageUpload" placeholder="输入影像上传链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="核保链接" prop="insurance">
|
|
|
+ <el-input v-model="item.insurance" placeholder="输入核保链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="缴费查询链接" prop="paymentQuery">
|
|
|
+ <el-input v-model="item.paymentQuery" placeholder="输入缴费查询链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="保单下载链接" prop="policyDownload">
|
|
|
+ <el-input v-model="item.policyDownload" placeholder="输入保单下载链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="非车险查询链接" prop="nonCarInsurance">
|
|
|
+ <el-input v-model="item.nonCarInsurance" placeholder="输入非车险查询链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="人工核保状态刷新链接" prop="manualStatusRefresh">
|
|
|
+ <el-input v-model="item.manualStatusRefresh" placeholder="输入人工核保状态刷新链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ <ElCol :md="24" :lg="12" v-if="item.apiType == '2'">
|
|
|
+ <el-form-item label="撤销订单链接" prop="revokeOrder">
|
|
|
+ <el-input v-model="item.revokeOrder" placeholder="输入撤销订单链接" />
|
|
|
+ </el-form-item>
|
|
|
+ </ElCol>
|
|
|
+ </el-form>
|
|
|
+ <ElDivider style="margin: 0;"></ElDivider>
|
|
|
+ <ElCol :md="24" :lg="24" style="margin: 10px 0;font-size: 14px;">
|
|
|
+ <span class="strong" style="margin-right: 10px;">基本信息</span>
|
|
|
+ <el-button type="primary" @click="addParameter(index)">
|
|
|
+ <template #icon>
|
|
|
+ <ElIcon>
|
|
|
+ <plus />
|
|
|
+ </ElIcon>
|
|
|
+ </template>
|
|
|
+ 添加参数</el-button>
|
|
|
+ </ElCol>
|
|
|
+ <el-table :data="item.fields" style="width: 100%;">
|
|
|
+ <template #empty>
|
|
|
+ <div class="flex f-c a-c ">
|
|
|
+ <img src="../../assets/images/empty.png" alt="">
|
|
|
+ <span style="font-size: 14px;color: #909399;">暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-table-column prop="label" label="字段标题"></el-table-column>
|
|
|
+ <el-table-column prop="field" label="字段名称" width="180" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="type" label="类型" width="180" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="isEdit" label="是否必填" width="180" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <span v-if="scope.row.isEdit">是</span>
|
|
|
+ <span v-else>否</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="value" label="默认数据" width="180" align="center"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="280" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="primary" link @click="fieldsDel(scope.$index, index)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </ElCol>
|
|
|
+
|
|
|
+
|
|
|
+ </ElCol>
|
|
|
+ </ElRow>
|
|
|
+
|
|
|
+ </PageMain>
|
|
|
+ <el-drawer v-model="fieldsAddDrawer" :direction="direction" @open="DrawerOpen">
|
|
|
+ <template #header>
|
|
|
+ <h4>编辑参数</h4>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <div>
|
|
|
+ <el-form :model="fieldsFrom" label-width="120px" :rules="fieldsFromrules" label-position="top"
|
|
|
+ ref="fieldsFromRef" :size="fromSize">
|
|
|
+ <el-form-item label="类型" prop="type">
|
|
|
+ <el-radio-group v-model="fieldsFrom.type">
|
|
|
+ <el-radio value="text">text</el-radio>
|
|
|
+ <el-radio value="select">select</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="字段标题" prop="label">
|
|
|
+ <el-input v-model="fieldsFrom.label" placeholder="请输入字段标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="字段名称" prop="field">
|
|
|
+ <el-input v-model="fieldsFrom.field" placeholder="请输入字段名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否必填" prop="isEdit">
|
|
|
+ <el-radio-group v-model="fieldsFrom.isEdit">
|
|
|
+ <el-radio :value="true">必填</el-radio>
|
|
|
+ <el-radio :value="false">非必填</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="默认数据">
|
|
|
+ <el-input v-model="fieldsFrom.value" placeholder="请输入默认数据" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <div>
|
|
|
+ <el-button @click="fieldsAddDrawer = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="fieldsAdd(fieldsFromRef)">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang='ts' setup>
|
|
|
+import api from '@/api';
|
|
|
+import { ref, reactive, onBeforeMount } from 'vue';
|
|
|
+import { ElMessage, ComponentSize, FormInstance, TabPaneName, FormRules, DrawerProps } from 'element-plus';
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+onBeforeMount(() => {
|
|
|
+ companyQuery();
|
|
|
+ dictType('api_type');//展业范围
|
|
|
+
|
|
|
+});
|
|
|
+interface companyList {
|
|
|
+ nameSimple: string,
|
|
|
+ name: string,
|
|
|
+ id: string,
|
|
|
+ [key: string]: any
|
|
|
+}
|
|
|
+interface TabItem {
|
|
|
+ title: string;
|
|
|
+ name: string;
|
|
|
+ id?: string,
|
|
|
+ insCompanyId: string;
|
|
|
+ apiType: string;
|
|
|
+ attributionConfig: string;
|
|
|
+ quotation: string;
|
|
|
+ imageUpload: string;
|
|
|
+ insurance: string;
|
|
|
+ paymentQuery: string;
|
|
|
+ policyDownload: string;
|
|
|
+ nonCarInsurance: string;
|
|
|
+ manualStatusRefresh: string;
|
|
|
+ revokeOrder: string;
|
|
|
+ fields: FieldItem[];
|
|
|
+}
|
|
|
+
|
|
|
+interface FieldItem {
|
|
|
+ field: string;
|
|
|
+ label: string;
|
|
|
+ type: string;
|
|
|
+ isEdit: string;
|
|
|
+ value: string;
|
|
|
+}
|
|
|
+type FieldsFrom = {
|
|
|
+ field: string;
|
|
|
+ label: string;
|
|
|
+ type: string;
|
|
|
+ isEdit: string;
|
|
|
+ value: string;
|
|
|
+};
|
|
|
+const dictLists = ref<{ [key: string]: any[] }>({});//字典集合
|
|
|
+const fieldsAddDrawer = ref(false)//抽屉显示隐藏
|
|
|
+const direction = ref<DrawerProps['direction']>('rtl')
|
|
|
+const companyName = ref<string>("")//保险公司检索条件
|
|
|
+const companyList = ref<companyList>();
|
|
|
+const companyactiveID = ref("");
|
|
|
+const companyactiveName = ref("")
|
|
|
+const productFormRef = ref<FormInstance>()
|
|
|
+const fieldsFromRef = ref<FormInstance>()
|
|
|
+const fromSize = ref<ComponentSize>('default')
|
|
|
+let tabIndex = 1//自增name标识
|
|
|
+const tabIdIndex = ref(0)//配置数组下标
|
|
|
+const editableTabsValue = ref('parameter1')
|
|
|
+const editableTabs = reactive<TabItem[]>([
|
|
|
+ {
|
|
|
+ title: '参数配置1',
|
|
|
+ name: 'parameter1',
|
|
|
+ id: "",
|
|
|
+ insCompanyId: '',//保险公司id
|
|
|
+ apiType: "",//对接方式
|
|
|
+ attributionConfig: "",//保司账号登录地址
|
|
|
+ quotation: "",//报价url
|
|
|
+ imageUpload: "",//影像url
|
|
|
+ insurance: "",//核保url
|
|
|
+ paymentQuery: "",//缴费url
|
|
|
+ policyDownload: "",//保单下载url
|
|
|
+ nonCarInsurance: "",//非车查询url
|
|
|
+ manualStatusRefresh: "",//人工核保刷新url
|
|
|
+ revokeOrder: "",//撤销订单url
|
|
|
+ fields: [],
|
|
|
+ },
|
|
|
+])
|
|
|
+const fieldsFrom: FieldsFrom = reactive({
|
|
|
+ field: "",
|
|
|
+ label: "",
|
|
|
+ type: "",
|
|
|
+ isEdit: "",
|
|
|
+ value: "",
|
|
|
+})
|
|
|
+const fieldsFromrules = ref<FormRules>({
|
|
|
+ field: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入字段名称' },
|
|
|
+ ],
|
|
|
+ isEdit: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择是否必填' },
|
|
|
+ ],
|
|
|
+ label: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入字段标题' },
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择类型' },
|
|
|
+ ],
|
|
|
+})
|
|
|
+const parameterrules = ref<FormRules>({
|
|
|
+ apiType: [
|
|
|
+ { required: true, trigger: 'change', message: '请选择对接方式' },
|
|
|
+ ],
|
|
|
+ attributionConfig: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入账号登录地址' },
|
|
|
+ ],
|
|
|
+ quotation: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入报价链接地址' },
|
|
|
+ ],
|
|
|
+ imageUpload: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入影像上传链接地址' },
|
|
|
+ ],
|
|
|
+ insurance: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入核保链接地址' },
|
|
|
+ ],
|
|
|
+ paymentQuery: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入缴费查询链接地址' },
|
|
|
+ ],
|
|
|
+ policyDownload: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入保单下载链接地址' },
|
|
|
+ ],
|
|
|
+ nonCarInsurance: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入非车险查询链接地址' },
|
|
|
+ ],
|
|
|
+ manualStatusRefresh: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入人工核保状态刷新链接地址' },
|
|
|
+ ],
|
|
|
+ revokeOrder: [
|
|
|
+ { required: true, trigger: 'blur', message: '请输入撤销订单链接地址' },
|
|
|
+ ],
|
|
|
+})
|
|
|
+//字典信息处理
|
|
|
+const dictType = (type: string) => {
|
|
|
+ api.toolApi.dictType({ dictCode: type }).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ dictLists.value[type + 'List'] = res.data.map((item: any) => {
|
|
|
+ return {
|
|
|
+ value: item.value,
|
|
|
+ label: item.label
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+const query = () => {
|
|
|
+ api.company.attributionTemplatequery({ companyId: companyactiveID.value }).then((res: any) => {
|
|
|
+ if (res.code == '200' && res.data.length) {
|
|
|
+ // 只保留 editableTabs 中已有的字段
|
|
|
+ const filteredData = res.data.map((item: any) => {
|
|
|
+ const newItem: Partial<TabItem> = {};
|
|
|
+ for (const key in editableTabs[0]) {
|
|
|
+ if (item.hasOwnProperty(key)) {
|
|
|
+ newItem[key as keyof TabItem] = item[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return newItem as TabItem;
|
|
|
+ });
|
|
|
+ editableTabs.splice(0, editableTabs.length, ...filteredData);
|
|
|
+ editableTabsValue.value = editableTabs[0].name;
|
|
|
+ tabIndex = editableTabs.length;
|
|
|
+ } else {
|
|
|
+ let list: TabItem[] = [];
|
|
|
+ list.push({
|
|
|
+ title: '参数配置1',
|
|
|
+ name: 'parameter1',
|
|
|
+ id: "",
|
|
|
+ insCompanyId: '',//保险公司id
|
|
|
+ apiType: "",//对接方式
|
|
|
+ attributionConfig: "",//保司账号登录地址
|
|
|
+ quotation: "",//报价url
|
|
|
+ imageUpload: "",//影像url
|
|
|
+ insurance: "",//核保url
|
|
|
+ paymentQuery: "",//缴费url
|
|
|
+ policyDownload: "",//保单下载url
|
|
|
+ nonCarInsurance: "",//非车查询url
|
|
|
+ manualStatusRefresh: "",//人工核保刷新url
|
|
|
+ revokeOrder: "",//撤销订单url
|
|
|
+ fields: [],
|
|
|
+ })
|
|
|
+ editableTabs.length = 0; // 清空当前内容
|
|
|
+ editableTabs.push(...list); // 将 list 的内容添加到 editableTabs 中
|
|
|
+ editableTabsValue.value = editableTabs[0].name;
|
|
|
+ tabIndex = editableTabs.length;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+const handleTabsEdit = (
|
|
|
+ targetName: TabPaneName | undefined,
|
|
|
+ action: 'remove' | 'add'
|
|
|
+) => {
|
|
|
+ if (action === 'add') {
|
|
|
+ const newTabName = `${++tabIndex}`
|
|
|
+
|
|
|
+ editableTabs.push({
|
|
|
+ title: `参数配置${newTabName}`,
|
|
|
+ name: 'parameter' + newTabName,
|
|
|
+ id: "",
|
|
|
+ insCompanyId: companyactiveID.value,//保险公司id
|
|
|
+ apiType: "",//对接方式
|
|
|
+ attributionConfig: "",//保司账号登录地址
|
|
|
+ quotation: "",//报价url
|
|
|
+ imageUpload: "",//影像url
|
|
|
+ insurance: "",//核保url
|
|
|
+ paymentQuery: "",//缴费url
|
|
|
+ policyDownload: "",//保单下载url
|
|
|
+ nonCarInsurance: "",//非车查询url
|
|
|
+ manualStatusRefresh: "",//人工核保刷新url
|
|
|
+ revokeOrder: "",//撤销订单url
|
|
|
+ fields: [],
|
|
|
+
|
|
|
+ })
|
|
|
+ editableTabsValue.value = 'parameter' + newTabName
|
|
|
+ } else if (action === 'remove') {
|
|
|
+ const tabs = editableTabs
|
|
|
+ let activeName = editableTabsValue.value
|
|
|
+ if (activeName != 'parameter1') {
|
|
|
+ if (activeName === targetName) {
|
|
|
+ tabs.forEach((tab, index) => {
|
|
|
+ if (tab.name === targetName) {
|
|
|
+ const nextTab = tabs[index + 1] || tabs[index - 1]
|
|
|
+ if (nextTab) {
|
|
|
+ activeName = nextTab.name
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ editableTabsValue.value = activeName
|
|
|
+ const index = editableTabs.findIndex((tab) => tab.name === targetName)
|
|
|
+ if (index !== -1) {
|
|
|
+ editableTabs.splice(index, 1)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: 'warning',
|
|
|
+ message: '至少保留一个',
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//保存配置
|
|
|
+const parameterAdd = async () => {
|
|
|
+ editableTabs.map((ele) => {
|
|
|
+ ele.insCompanyId = companyactiveID.value;
|
|
|
+ return ele;
|
|
|
+ })
|
|
|
+ await api.company.attributionTemplate(editableTabs).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ ElMessage({
|
|
|
+ type: 'success',
|
|
|
+ message: res.msg,
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+const parametervalidate = async (formEl: FormInstance | undefined | any) => {
|
|
|
+ if (!formEl) return
|
|
|
+ const validationPromises = editableTabs.map((formRef, index) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (formRef) {
|
|
|
+ formEl[index].validate((valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ resolve(true);
|
|
|
+ } else {
|
|
|
+ reject(false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ reject(false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ try {
|
|
|
+ await Promise.all(validationPromises);
|
|
|
+ // 所有表单验证通过后执行提交逻辑
|
|
|
+ parameterAdd();
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: '请确保所有表单均已完成验证',
|
|
|
+ plain: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//获取保险公司列表
|
|
|
+const companyQuery = () => {
|
|
|
+ api.company.selectLevelList({ name: companyName.value }).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ companyList.value = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+//租户列表事件
|
|
|
+async function roleitemClick(item: { id: string, name: string }) {
|
|
|
+ companyactiveID.value = item.id;
|
|
|
+ companyactiveName.value = item.name;
|
|
|
+ query();
|
|
|
+
|
|
|
+}
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * @param fieldsindex 字段数据下标
|
|
|
+ * @param index 配置数组下标
|
|
|
+ */
|
|
|
+const fieldsDel = (fieldsindex: any, index: number) => {
|
|
|
+ editableTabs[index].fields.splice(fieldsindex, 1);
|
|
|
+}
|
|
|
+// 参数添加事件
|
|
|
+const fieldsAdd = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ editableTabs[tabIdIndex.value].fields.push({ ...fieldsFrom })
|
|
|
+ fieldsAddDrawer.value = false;
|
|
|
+ } else {
|
|
|
+ ElMessage({
|
|
|
+ type: 'error',
|
|
|
+ message: '信息不完整',
|
|
|
+ plain: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+//抽屉事件
|
|
|
+const addParameter = (index: number) => {
|
|
|
+ tabIdIndex.value = index;
|
|
|
+ fieldsAddDrawer.value = true
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+const DrawerOpen = () => {
|
|
|
+ //抽屉打开清空表单
|
|
|
+ for (const key in fieldsFrom) {
|
|
|
+ fieldsFrom[key as keyof FieldsFrom] = '';
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.roleitem {
|
|
|
+ span:first-child {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:last-child {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.roleitem:hover {
|
|
|
+ background: #f4faff;
|
|
|
+ transition: 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ background: #f4faff;
|
|
|
+ border-right: 2px solid #0083ff;
|
|
|
+}
|
|
|
+
|
|
|
+// .container::-webkit-scrollbar {
|
|
|
+// display: none;
|
|
|
+
|
|
|
+// /* 针对 Webkit 浏览器 (如 Chrome/Safari) */
|
|
|
+// }
|
|
|
+</style>
|
