|
|
@@ -1,556 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <PlusPage
|
|
|
- ref="plusPageInstance"
|
|
|
- :columns="tableConfig"
|
|
|
- :request="getList"
|
|
|
- :is-card="true"
|
|
|
- :search="{
|
|
|
- labelWidth: 100,
|
|
|
- showNumber: 3,
|
|
|
- defaultValues: defaultValues
|
|
|
- }"
|
|
|
- :table="{
|
|
|
- actionBar: { buttons, type: 'link', width: 180 },
|
|
|
- adaptive: { offsetBottom: 50 },
|
|
|
- onFormChange: handleTableChange
|
|
|
- }"
|
|
|
- :pageInfoMap="{ page: 'pageNum', pageSize: 'pageSize' }"
|
|
|
- >
|
|
|
- <template #table-title>
|
|
|
- <el-row class="button-row">
|
|
|
- <el-button size="default" type="success" @click="handleCreate">
|
|
|
- 新增
|
|
|
- </el-button>
|
|
|
- </el-row>
|
|
|
- </template>
|
|
|
- </PlusPage>
|
|
|
- <!-- 弹窗编辑 -->
|
|
|
- <PlusDialogForm
|
|
|
- ref="dialogForm"
|
|
|
- v-model="form"
|
|
|
- v-model:visible="dialogVisible"
|
|
|
- :form="{
|
|
|
- columns,
|
|
|
- labelPosition: 'right',
|
|
|
- labelWidth: 100,
|
|
|
- rowProps: { gutter: 20 },
|
|
|
- colProps: { span: 24 },
|
|
|
- rules
|
|
|
- }"
|
|
|
- :dialog="{ title: dialogTitle + '菜单', width: 800, confirmLoading }"
|
|
|
- @confirm="handleSubmit"
|
|
|
- @close="handleClose"
|
|
|
- />
|
|
|
- <PlusDialog
|
|
|
- v-model="detailsVisible"
|
|
|
- :hasFooter="false"
|
|
|
- title="密钥"
|
|
|
- width="400"
|
|
|
- >
|
|
|
- <PlusDescriptions
|
|
|
- :column="24"
|
|
|
- :columns="descriptionsColumns"
|
|
|
- :data="descriptionsData"
|
|
|
- />
|
|
|
- </PlusDialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { computed, onMounted, reactive, ref, toRefs, h } from "vue";
|
|
|
-import type { FormRules } from "element-plus";
|
|
|
-import { ElMessage, ElMessageBox, ElInput, ElButton } from "element-plus";
|
|
|
-import {
|
|
|
- type FieldValues,
|
|
|
- type PlusColumn,
|
|
|
- PlusDescriptions,
|
|
|
- PlusDialog,
|
|
|
- PlusDialogForm,
|
|
|
- PlusPage,
|
|
|
- PlusPageInstance,
|
|
|
- useTable
|
|
|
-} from "plus-pro-components";
|
|
|
-import { deleteIpAccount } from "@/api/system/ipAccount";
|
|
|
-import {
|
|
|
- switchIpAccountInterfaceStatus,
|
|
|
- addOrEditIpAccountInterfaceRef,
|
|
|
- generateIpAccountToken,
|
|
|
- getIpAccountInterfaceList,
|
|
|
- getIpInterfaceOptionList
|
|
|
-} from "@/api/system/ipInterface";
|
|
|
-import { isString } from "@pureadmin/utils";
|
|
|
-import { useRoute } from "vue-router";
|
|
|
-
|
|
|
-defineOptions({
|
|
|
- name: "IpAccountIndex"
|
|
|
-});
|
|
|
-
|
|
|
-const route = useRoute();
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- getInterfaceOptions();
|
|
|
-});
|
|
|
-
|
|
|
-const plusPageInstance = ref<PlusPageInstance | null>(null);
|
|
|
-
|
|
|
-const defaultValues = {
|
|
|
- accountId: isString(route.query.accountId)
|
|
|
- ? route.query.accountId.toString()
|
|
|
- : "",
|
|
|
- accNo: isString(route.query.accNo) ? route.query.accNo.toString() : ""
|
|
|
-};
|
|
|
-
|
|
|
-const getList = async (query: Record<string, any>) => {
|
|
|
- let res = await getIpAccountInterfaceList(query);
|
|
|
- return {
|
|
|
- data: res.list,
|
|
|
- total: res.total
|
|
|
- };
|
|
|
-};
|
|
|
-
|
|
|
-// 重新请求列表接口
|
|
|
-const refresh = () => {
|
|
|
- plusPageInstance.value?.getList();
|
|
|
-};
|
|
|
-
|
|
|
-const handleTableChange = (values: any) => {
|
|
|
- console.log(values);
|
|
|
- ElMessageBox.confirm("确定修改此数据吗?", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning"
|
|
|
- })
|
|
|
- .then(async () => {
|
|
|
- try {
|
|
|
- let data = {
|
|
|
- id: values.row.id,
|
|
|
- status: values.row.status
|
|
|
- };
|
|
|
- let res = await switchIpAccountInterfaceStatus(data);
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage.success("修改成功");
|
|
|
- } else {
|
|
|
- ElMessage.error(res.msg);
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- ElMessage.error("修改失败");
|
|
|
- }
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- refresh();
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-const dialogTitle = computed(() => (state.isCreate ? "新增" : "编辑"));
|
|
|
-
|
|
|
-// 表格数据
|
|
|
-const tableConfig: PlusColumn[] = [
|
|
|
- {
|
|
|
- label: "账户号",
|
|
|
- prop: "accNo",
|
|
|
- valueType: "input",
|
|
|
- hideInTable: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "账户id",
|
|
|
- prop: "id",
|
|
|
- hideInSearch: true,
|
|
|
- hideInTable: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "接口名称",
|
|
|
- prop: "interfaceName",
|
|
|
- hideInSearch: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "接口厂商",
|
|
|
- prop: "manufacturer",
|
|
|
- hideInSearch: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "状态",
|
|
|
- prop: "status",
|
|
|
- valueType: "switch",
|
|
|
- fieldProps: {
|
|
|
- activeValue: "normal",
|
|
|
- inactiveValue: "disable"
|
|
|
- },
|
|
|
- editable: true,
|
|
|
- hideInSearch: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "状态",
|
|
|
- prop: "status",
|
|
|
- valueType: "select",
|
|
|
- fieldProps: {
|
|
|
- options: [
|
|
|
- { label: "正常", value: "normal" },
|
|
|
- { label: "禁用", value: "disable" }
|
|
|
- ],
|
|
|
- clearable: true
|
|
|
- },
|
|
|
- hideInTable: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "备注",
|
|
|
- prop: "remark",
|
|
|
- hideInSearch: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "是否回调",
|
|
|
- prop: "callback",
|
|
|
- valueType: "tag",
|
|
|
- fieldProps: value => ({
|
|
|
- type: value === true ? "success" : "info"
|
|
|
- }),
|
|
|
- formatter: value => (value === true ? "是" : "否"),
|
|
|
- hideInSearch: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "创建时间",
|
|
|
- prop: "addTime",
|
|
|
- valueType: "time-picker",
|
|
|
- hideInSearch: true
|
|
|
- },
|
|
|
- {
|
|
|
- label: "创建人",
|
|
|
- prop: "addUserName",
|
|
|
- hideInSearch: true
|
|
|
- }
|
|
|
-];
|
|
|
-
|
|
|
-/*--------------------表单--------------------*/
|
|
|
-
|
|
|
-// 表单实例
|
|
|
-const dialogForm = ref(null);
|
|
|
-
|
|
|
-interface State {
|
|
|
- dialogVisible: boolean;
|
|
|
- detailsVisible: boolean;
|
|
|
- confirmLoading: boolean;
|
|
|
- selectedIds: number[];
|
|
|
- isCreate: boolean;
|
|
|
- form: {};
|
|
|
- rules: FormRules;
|
|
|
- descriptionsData: {};
|
|
|
-}
|
|
|
-
|
|
|
-const state = reactive<State>({
|
|
|
- dialogVisible: false,
|
|
|
- detailsVisible: false,
|
|
|
- confirmLoading: false,
|
|
|
- selectedIds: [],
|
|
|
- isCreate: false,
|
|
|
- form: {},
|
|
|
- rules: {
|
|
|
- interfaceId: [{ required: true, message: "请选择接口", trigger: "blur" }],
|
|
|
- token: [{ required: true, message: "请生成token", trigger: "blur" }],
|
|
|
- secret: [{ required: true, message: "请生成密钥", trigger: "blur" }]
|
|
|
- },
|
|
|
- descriptionsData: {}
|
|
|
-});
|
|
|
-
|
|
|
-const interfaceOptions = ref<Array<{ label: string; value: string }>>([]);
|
|
|
-
|
|
|
-const getInterfaceOptions = async () => {
|
|
|
- let res = await getIpInterfaceOptionList();
|
|
|
- console.log(res);
|
|
|
- interfaceOptions.value = res.data;
|
|
|
-};
|
|
|
-
|
|
|
-const columns: PlusColumn[] = [
|
|
|
- {
|
|
|
- label: "账户号",
|
|
|
- prop: "accNo",
|
|
|
- valueType: "input",
|
|
|
- fieldProps: {
|
|
|
- disabled: true
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "选择接口",
|
|
|
- prop: "interfaceId",
|
|
|
- valueType: "select",
|
|
|
- fieldProps: {
|
|
|
- activeValue: "normal",
|
|
|
- inactiveValue: "disable"
|
|
|
- },
|
|
|
- options: computed(() => interfaceOptions.value),
|
|
|
- optionsMap: {
|
|
|
- label: "name",
|
|
|
- value: "id"
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "是否回调",
|
|
|
- prop: "callback",
|
|
|
- valueType: "select",
|
|
|
- fieldProps: {
|
|
|
- options: [
|
|
|
- { label: "是", value: true },
|
|
|
- { label: "否", value: false }
|
|
|
- ]
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "回调地址",
|
|
|
- prop: "callbackUrl",
|
|
|
- valueType: "input",
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "回调次数",
|
|
|
- prop: "callbackNum",
|
|
|
- valueType: "input-number",
|
|
|
- fieldProps: {
|
|
|
- min: 0
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "状态",
|
|
|
- prop: "status",
|
|
|
- valueType: "radio",
|
|
|
- fieldProps: {
|
|
|
- options: [
|
|
|
- { label: "正常", value: "normal" },
|
|
|
- { label: "禁用", value: "disable" }
|
|
|
- ]
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "token",
|
|
|
- prop: "token",
|
|
|
- renderField: (_, onChange) => {
|
|
|
- return h(
|
|
|
- ElInput,
|
|
|
- {
|
|
|
- placeholder: "点击生成按钮获取token",
|
|
|
- disabled: true,
|
|
|
- // 返回VNode时,需要手动调用 renderField 的onChange 回调把值传给表单
|
|
|
- onChange
|
|
|
- },
|
|
|
- {
|
|
|
- append: () =>
|
|
|
- h(
|
|
|
- ElButton,
|
|
|
- {
|
|
|
- onClick: async () => {
|
|
|
- try {
|
|
|
- let res = await generateIpAccountToken();
|
|
|
- console.log(res);
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage.success("获取token成功");
|
|
|
- form.value = {
|
|
|
- ...form.value,
|
|
|
- token: res.data.token,
|
|
|
- secret: res.data.secret
|
|
|
- };
|
|
|
- } else {
|
|
|
- ElMessage.error(res.msg);
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- ElMessage.error("获取token失败");
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- { default: () => "生成" }
|
|
|
- )
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "secret",
|
|
|
- prop: "secret",
|
|
|
- valueType: "input",
|
|
|
- fieldProps: {
|
|
|
- disabled: true,
|
|
|
- placeholder: "点击生成按钮获取secret",
|
|
|
- type: "textarea",
|
|
|
- rows: 3
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "备注",
|
|
|
- prop: "remark",
|
|
|
- valueType: "input",
|
|
|
- fieldProps: {
|
|
|
- type: "textarea",
|
|
|
- rows: 3
|
|
|
- },
|
|
|
- colProps: {
|
|
|
- span: 12
|
|
|
- }
|
|
|
- }
|
|
|
-];
|
|
|
-
|
|
|
-const descriptionsColumns: PlusColumn[] = [
|
|
|
- {
|
|
|
- label: "token",
|
|
|
- prop: "token",
|
|
|
- valueType: "copy",
|
|
|
- descriptionsItemProps: {
|
|
|
- span: 24,
|
|
|
- className: "break-all"
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: "secret",
|
|
|
- prop: "secret",
|
|
|
- valueType: "copy",
|
|
|
- descriptionsItemProps: {
|
|
|
- span: 24,
|
|
|
- className: "break-all"
|
|
|
- }
|
|
|
- }
|
|
|
-];
|
|
|
-
|
|
|
-// 创建
|
|
|
-const handleCreate = (): void => {
|
|
|
- form.value = {
|
|
|
- ...defaultValues,
|
|
|
- status: "normal"
|
|
|
- };
|
|
|
- state.isCreate = true;
|
|
|
- state.dialogVisible = true;
|
|
|
-};
|
|
|
-
|
|
|
-const handleSubmit = async (values: FieldValues) => {
|
|
|
- console.log(values, "Submit");
|
|
|
- confirmLoading.value = true;
|
|
|
- if (state.isCreate) {
|
|
|
- try {
|
|
|
- let params = form.value;
|
|
|
- let res = await addOrEditIpAccountInterfaceRef(params);
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage.success("新增成功");
|
|
|
- confirmLoading.value = false;
|
|
|
- dialogVisible.value = false;
|
|
|
- refresh();
|
|
|
- } else {
|
|
|
- ElMessage.error(res.msg);
|
|
|
- }
|
|
|
- } finally {
|
|
|
- confirmLoading.value = false;
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 编辑
|
|
|
- try {
|
|
|
- let params = form.value;
|
|
|
- let res = await addOrEditIpAccountInterfaceRef(params);
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage.success("修改成功");
|
|
|
- confirmLoading.value = false;
|
|
|
- dialogVisible.value = false;
|
|
|
- refresh();
|
|
|
- } else {
|
|
|
- ElMessage.error(res.msg);
|
|
|
- }
|
|
|
- } finally {
|
|
|
- confirmLoading.value = false;
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const handleClose = () => {
|
|
|
- console.log(dialogForm.value.formInstance);
|
|
|
-};
|
|
|
-
|
|
|
-const { buttons } = useTable();
|
|
|
-
|
|
|
-buttons.value = [
|
|
|
- {
|
|
|
- // 修改
|
|
|
- text: "修改",
|
|
|
- code: "edit",
|
|
|
- // props v0.1.16 版本新增函数类型
|
|
|
- props: {
|
|
|
- type: "primary"
|
|
|
- },
|
|
|
- onClick(params) {
|
|
|
- console.log(params.row);
|
|
|
- let paramsRow = params.row;
|
|
|
- Object.assign(paramsRow, defaultValues);
|
|
|
- form.value = paramsRow;
|
|
|
- state.isCreate = false;
|
|
|
- state.dialogVisible = true;
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- // 修改
|
|
|
- text: "查看密钥",
|
|
|
- code: "interface",
|
|
|
- // props v0.1.16 版本新增函数类型
|
|
|
- props: {
|
|
|
- type: "primary"
|
|
|
- },
|
|
|
- onClick(val) {
|
|
|
- console.log(val);
|
|
|
- detailsVisible.value = true;
|
|
|
- descriptionsData.value = {
|
|
|
- token: val.row.token,
|
|
|
- secret: val.row.secret
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- // 删除
|
|
|
- text: "删除",
|
|
|
- code: "delete",
|
|
|
- // props v0.1.16 版本新增计算属性支持
|
|
|
- props: computed(() => ({ type: "danger" })),
|
|
|
- confirm: {
|
|
|
- options: {
|
|
|
- draggable: true,
|
|
|
- message: "确定删除此数据吗?"
|
|
|
- }
|
|
|
- },
|
|
|
- onConfirm: async params => {
|
|
|
- try {
|
|
|
- let res = await deleteIpAccount(params.row.id);
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage.success("删除成功");
|
|
|
- refresh();
|
|
|
- } else {
|
|
|
- ElMessage.error(res.msg);
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- ElMessage.error("删除失败");
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-];
|
|
|
-
|
|
|
-const {
|
|
|
- form,
|
|
|
- confirmLoading,
|
|
|
- rules,
|
|
|
- dialogVisible,
|
|
|
- detailsVisible,
|
|
|
- descriptionsData
|
|
|
-} = toRefs(state);
|
|
|
-</script>
|