268 lines
12 KiB
Vue
268 lines
12 KiB
Vue
<template>
|
||
<div class="shceme-info">
|
||
<a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol"
|
||
:wrapper-col="wrapperCol" :disabled="data.componentDisabled">
|
||
<template v-if="!data.componentDisabled">
|
||
<a-form-item label="模板编号" name="code">
|
||
<a-input v-model:value="formState.code" placeholder="请输入" />
|
||
</a-form-item>
|
||
<a-form-item label="模板名称" name="name">
|
||
<a-input v-model:value="formState.name" placeholder="请输入" />
|
||
</a-form-item>
|
||
<a-form-item label="模板图标" name="icon">
|
||
<IconPicker v-model:value="formState.icon" />
|
||
</a-form-item>
|
||
<a-form-item label="图标颜色" name="color">
|
||
<a-input type="color" v-model="formState.color" placeholder="请输入"></a-input>
|
||
</a-form-item>
|
||
<a-form-item label="模板分类" name="category">
|
||
<a-select v-model:value="formState.category" placeholder="请选择" :options="data.optionsType"
|
||
:field-names="{ label: 'itemName', value: 'itemValue' }">
|
||
</a-select>
|
||
</a-form-item>
|
||
<a-form-item label="我的任务创建">
|
||
<a-radio-group v-model:value="formState.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.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.description" placeholder="请填写备注"
|
||
:auto-size="{ minRows: 5, maxRows: 8 }" />
|
||
</template>
|
||
<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数据库" :options="sqlOptions"
|
||
:field-names="{ label: 'text', value: 'id',options :'childNodes' }">
|
||
</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数据库" :options="sqlOptions"
|
||
:field-names="{ label: 'text', value: 'id',options :'childNodes' }">
|
||
</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数据库" :options="sqlOptions"
|
||
:field-names="{ label: 'text', value: 'id',options :'childNodes' }">
|
||
</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, onMounted, defineProps } from 'vue';
|
||
import type { UnwrapRef } from 'vue';
|
||
import type { Rule } from 'ant-design-vue/es/form';
|
||
import { IconPicker } from '/@/components/Icon';
|
||
import { getLoad } from '@/api/sys/sysDataItemDetail';
|
||
import { getLoadDataBaseLinkTree } from '@/api/demo/system';
|
||
|
||
const formRef = ref();
|
||
const labelCol = { span: 7 };
|
||
const wrapperCol = { span: 17 };
|
||
const activeKey = ref('1')
|
||
const props = defineProps({
|
||
pageType: String,
|
||
})
|
||
const data = reactive({
|
||
optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],
|
||
optionsType: [],
|
||
componentDisabled: props.pageType == 'detail' ? true : false,
|
||
})
|
||
const sqlOptions =ref([])
|
||
|
||
let formState = ref({
|
||
code: '',
|
||
name: '',
|
||
category: '',
|
||
enabledMark: 1,
|
||
mark: 1,
|
||
isInApp: 2,
|
||
description: '',
|
||
|
||
titleRules: '',
|
||
|
||
undoType: "1",
|
||
undoDbCode: '',
|
||
undoDbSQL: '',
|
||
undoIOCName: '',
|
||
undoUrl: '',
|
||
|
||
deleteType: "1",
|
||
deleteDbCode: '',
|
||
deleteDbSQL: '',
|
||
deleteIOCName: '',
|
||
deleteUrl: '',
|
||
|
||
deleteDraftType: "1",
|
||
deleteDraftDbCode: '',
|
||
deleteDraftDbSQL: '',
|
||
deleteDraftIOCName: '',
|
||
deleteDraftUrl: '',
|
||
icon: 'ant-design:appstore-outlined',
|
||
color: '#409EFF',
|
||
});
|
||
const rules: Record<string, Rule[]> = {
|
||
code: [
|
||
{ required: true, message: '请输入模板编号' },
|
||
// { validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
|
||
],
|
||
name: [
|
||
{ required: true, message: '请输入模板名称' }
|
||
],
|
||
category: [
|
||
{ required: true, message: '请选择模板分类' }
|
||
],
|
||
icon: [
|
||
{ required: true, message: '请选择图标' }
|
||
],
|
||
color: [
|
||
{ required: true, message: '请选择颜色' }
|
||
],
|
||
};
|
||
async function getSQL(){
|
||
const data = await getLoadDataBaseLinkTree()
|
||
data.forEach(element => {
|
||
if(element.childNodes == null){
|
||
element.childNodes = []
|
||
}
|
||
});
|
||
sqlOptions.value = data
|
||
}
|
||
async function fetch() {
|
||
let list = await getLoad({ code: 'FlowSort' });
|
||
data.optionsType = list
|
||
|
||
}
|
||
async function validateForm() {
|
||
let res = await formRef.value
|
||
.validate()
|
||
.then((values) => {
|
||
return true
|
||
})
|
||
.catch((error: ValidateErrorEntity<FormState>) => {
|
||
return false
|
||
});
|
||
return res
|
||
}
|
||
function setForm(data) {
|
||
formState.value = data
|
||
}
|
||
function getForm() {
|
||
return formState.value
|
||
}
|
||
defineExpose({
|
||
setForm,
|
||
getForm,
|
||
validateForm
|
||
})
|
||
onMounted(() => {
|
||
fetch();
|
||
getSQL()
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.site-space-compact-wrapper {
|
||
width: 100%;
|
||
|
||
.ant-select {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
::v-deep .ant-tabs {
|
||
padding: 0 !important;
|
||
}
|
||
</style> |