220 lines
11 KiB
Vue
220 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div class="shceme-info">
|
|||
|
|
<a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
|
|||
|
|
<a-form-item label="模板编号" name="f_Code">
|
|||
|
|
<a-input v-model:value="formState.f_Code" placeholder="请输入" />
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="模板名称" name="f_Name">
|
|||
|
|
<a-input v-model:value="formState.f_Name" placeholder="请输入" />
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="模板图标" name="f_Icon">
|
|||
|
|
<IconPicker :value="formState.f_Icon" />
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="图标颜色" name="f_Color">
|
|||
|
|
<a-input type="color" v-model="formState.f_Color" placeholder="请输入"></a-input>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="模板分类" name="f_Category">
|
|||
|
|
<a-select v-model:value="formState.f_Category" placeholder="please select your zone">
|
|||
|
|
<a-select-option value="shanghai">Zone one</a-select-option>
|
|||
|
|
<a-select-option value="beijing">Zone two</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="我的任务创建">
|
|||
|
|
<a-radio-group v-model:value="formState.f_Mark" name="radioGroup">
|
|||
|
|
<a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
|
|||
|
|
</a-radio-group>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-form-item label="移动端创建">
|
|||
|
|
<a-radio-group v-model:value="formState.f_IsInApp" name="radioGroup">
|
|||
|
|
<a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
|
|||
|
|
</a-radio-group>
|
|||
|
|
</a-form-item>
|
|||
|
|
<a-textarea v-model:value="formState.f_Description" placeholder="请填写备注"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
|
|||
|
|
|
|||
|
|
<a-divider plain="true">撤销操作</a-divider>
|
|||
|
|
<a-tabs v-model:activeKey="formState.undoType" type="card" size="small" centered="true">
|
|||
|
|
<a-tab-pane key="1" tab="执行SQL">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库">
|
|||
|
|
<a-select-option value="shanghai">Zone one</a-select-option>
|
|||
|
|
<a-select-option value="beijing">Zone two</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-space-compact>
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.undoDbSQL"
|
|||
|
|
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
<a-tab-pane key="2" tab=".NET方法">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.undoIOCName" placeholder="请填写.NET方法IOC别名"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
<a-tab-pane key="3" tab="第三方接口">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.undoUrl"
|
|||
|
|
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
</a-tabs>
|
|||
|
|
|
|||
|
|
<a-divider plain="true">作废操作</a-divider>
|
|||
|
|
<a-tabs v-model:activeKey="formState.deleteType" type="card" size="small" centered="true">
|
|||
|
|
<a-tab-pane key="1" tab="执行SQL">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库">
|
|||
|
|
<a-select-option value="shanghai">Zone one</a-select-option>
|
|||
|
|
<a-select-option value="beijing">Zone two</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-space-compact>
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.deleteDbSQL"
|
|||
|
|
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
<a-tab-pane key="2" tab=".NET方法">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.deleteIOCName" placeholder="请填写.NET方法IOC别名"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
<a-tab-pane key="3" tab="第三方接口">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.undoUrl"
|
|||
|
|
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
</a-tabs>
|
|||
|
|
|
|||
|
|
<a-divider plain="true">删除草稿</a-divider>
|
|||
|
|
<a-tabs v-model:activeKey="formState.deleteDraftType" type="card" size="small" centered="true">
|
|||
|
|
<a-tab-pane key="1" tab="执行SQL">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库">
|
|||
|
|
<a-select-option value="shanghai">Zone one</a-select-option>
|
|||
|
|
<a-select-option value="beijing">Zone two</a-select-option>
|
|||
|
|
</a-select>
|
|||
|
|
</a-space-compact>
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.deleteDraftDbSQL"
|
|||
|
|
placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
<a-tab-pane key="2" tab=".NET方法">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.deleteDraftIOCName" placeholder="请填写.NET方法IOC别名"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
<a-tab-pane key="3" tab="第三方接口">
|
|||
|
|
<a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
|
|||
|
|
<a-space-compact block>
|
|||
|
|
<a-textarea v-model:value="formState.undoUrl"
|
|||
|
|
placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
|
|||
|
|
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
|||
|
|
</a-space-compact>
|
|||
|
|
</a-space>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
</a-tabs>
|
|||
|
|
</a-form>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { Dayjs } from 'dayjs';
|
|||
|
|
import { reactive, ref, toRaw } from 'vue';
|
|||
|
|
import type { UnwrapRef } from 'vue';
|
|||
|
|
import type { Rule } from 'ant-design-vue/es/form';
|
|||
|
|
import { IconPicker } from '/@/components/Icon';
|
|||
|
|
const formRef = ref();
|
|||
|
|
const labelCol = { span: 7 };
|
|||
|
|
const wrapperCol = { span: 17 };
|
|||
|
|
const activeKey = ref('1')
|
|||
|
|
const data = reactive({
|
|||
|
|
optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
const formState = reactive({
|
|||
|
|
f_Code: '',
|
|||
|
|
f_Name: '',
|
|||
|
|
f_Category: '',
|
|||
|
|
f_Mark: 1,
|
|||
|
|
f_IsInApp: 2,
|
|||
|
|
f_Description: '',
|
|||
|
|
|
|||
|
|
titleRules: '',
|
|||
|
|
|
|||
|
|
undoType: "1",
|
|||
|
|
undoDbCode: '',
|
|||
|
|
undoDbSQL: '',
|
|||
|
|
undoIOCName: '',
|
|||
|
|
undoUrl: '',
|
|||
|
|
|
|||
|
|
deleteType: "1",
|
|||
|
|
deleteDbCode: '',
|
|||
|
|
deleteDbSQL: '',
|
|||
|
|
deleteIOCName: '',
|
|||
|
|
deleteUrl: '',
|
|||
|
|
|
|||
|
|
deleteDraftType: "1",
|
|||
|
|
deleteDraftDbCode: '',
|
|||
|
|
deleteDraftDbSQL: '',
|
|||
|
|
deleteDraftIOCName: '',
|
|||
|
|
deleteDraftUrl: '',
|
|||
|
|
f_Icon: '',
|
|||
|
|
f_Color: '#409EFF',
|
|||
|
|
});
|
|||
|
|
const rules: Record<string, Rule[]> = {
|
|||
|
|
f_Code: [
|
|||
|
|
{ required: true, message: '请输入模板编号' },
|
|||
|
|
// { validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
f_Name: [
|
|||
|
|
{ required: true, message: '请输入模板名称' }
|
|||
|
|
],
|
|||
|
|
f_Category: [
|
|||
|
|
{ required: true, message: '请选择模板分类' }
|
|||
|
|
],
|
|||
|
|
f_Icon: [
|
|||
|
|
{ required: true, message: '请选择图标' }
|
|||
|
|
],
|
|||
|
|
f_Color: [
|
|||
|
|
{ required: true, message: '请选择颜色' }
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.site-space-compact-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
.ant-select {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .ant-tabs {
|
|||
|
|
padding: 0!important;
|
|||
|
|
}
|
|||
|
|
</style>
|