07/08
张同海
5 months ago
parent
3efecd0dff
commit
87579ce5e7
@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
:use-wrapper="true"
|
||||
title="编辑表单复制模板"
|
||||
width="50%"
|
||||
@register="registerModal"
|
||||
@ok="handleSave"
|
||||
>
|
||||
<a-form v-model="formData" class="copy-form-model" layout="vertical">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="模版名称" name="templateName">
|
||||
<a-input v-model:value="formData.templateName" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="权限模块名称">
|
||||
<!-- <a-input v-model:value="formData.permissionName" disabled placeholder="请输入" /> -->
|
||||
<a-select v-model:value="formData.permissionName" @change="ChangePermissionName">
|
||||
<a-select-option
|
||||
v-for="item in permissionNameList"
|
||||
:key="item.name"
|
||||
:value="item.name"
|
||||
>{{ item.description }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="排序号">
|
||||
<a-input v-model:value="formData.orderNo" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="表单号">
|
||||
<a-input v-model:value="formData.formNo" placeholder="请输入" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="是否可用">
|
||||
<a-radio-group v-model:value="formData.status" button-style="solid">
|
||||
<a-radio-button :value="0">禁用</a-radio-button>
|
||||
<a-radio-button :value="1">启用</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="是否公共表示">
|
||||
<a-radio-group v-model:value="formData.isPublic" button-style="solid">
|
||||
<a-radio-button :value="true">是</a-radio-button>
|
||||
<a-radio-button :value="false">否</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="表单设置">
|
||||
<a-checkbox-group v-model:value="checkedList" style="width: 100%">
|
||||
<a-row>
|
||||
<a-col
|
||||
v-for="(item, index) in plainOptions"
|
||||
v-show="item.field != 'id'"
|
||||
:span="6"
|
||||
:key="index"
|
||||
>
|
||||
<a-checkbox :value="item.field">{{ item.label }}</a-checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!--右下角按钮-->
|
||||
<template #footer>
|
||||
<a-button
|
||||
pre-icon="ant-design:close-outlined"
|
||||
type="warning"
|
||||
:loading="loading"
|
||||
ghost
|
||||
style="margin-right: 0.8rem"
|
||||
@click="closeModal"
|
||||
>
|
||||
取消
|
||||
</a-button>
|
||||
<a-button
|
||||
type="success"
|
||||
:loading="loading"
|
||||
pre-icon="ant-design:check-outlined"
|
||||
style="margin-right: 0.8rem"
|
||||
@click="handleSave(false)"
|
||||
>
|
||||
仅保存
|
||||
</a-button>
|
||||
<a-button
|
||||
pre-icon="ant-design:check-circle-outlined"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSave(true)"
|
||||
>
|
||||
保存并关闭
|
||||
</a-button>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, reactive, defineEmits } from 'vue'
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal'
|
||||
import { EditFormCopy, getCodeGoodsTypeInfo, getTablesByClient, getColumnsByClient } from '../api'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(true)
|
||||
const loading = ref(false)
|
||||
const rowId = ref('')
|
||||
const form = ref()
|
||||
const checkedList = ref()
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
templateName: '',
|
||||
permissionId: '',
|
||||
permissionName: '',
|
||||
isPublic: '',
|
||||
copyFields: '',
|
||||
formNo: '',
|
||||
orderNo: '',
|
||||
status: '',
|
||||
content: '',
|
||||
})
|
||||
const plainOptions: any = ref([])
|
||||
const { createMessage } = useMessage()
|
||||
const permissionNameList: any = ref([])
|
||||
function init() {
|
||||
getTablesByClient().then((res) => {
|
||||
permissionNameList.value = res.data
|
||||
})
|
||||
}
|
||||
function ChangePermissionName(e) {
|
||||
console.log(e)
|
||||
let ApiData = {
|
||||
tableViewName: e,
|
||||
}
|
||||
getColumnsByClient(ApiData).then((res) => {
|
||||
plainOptions.value.splice(0)
|
||||
res.data.forEach((e) => {
|
||||
plainOptions.value.push({
|
||||
field: e.dbColumnName,
|
||||
label: e.columnDescription,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false, loading: true })
|
||||
isUpdate.value = !!data?.isUpdate
|
||||
await init()
|
||||
console.log(unref(isUpdate), 11111111111111111)
|
||||
|
||||
if (unref(isUpdate)) {
|
||||
rowId.value = data.record.id
|
||||
const res: API.DataResult = await getCodeGoodsTypeInfo({ id: unref(rowId) })
|
||||
if (res?.data?.content) {
|
||||
const content = JSON.parse(res.data.content)
|
||||
plainOptions.value = content.columns
|
||||
}
|
||||
formData.id = res.data.id
|
||||
formData.templateName = res.data.templateName
|
||||
formData.permissionId = res.data.permissionId
|
||||
formData.permissionName = res.data.permissionName
|
||||
formData.isPublic = res.data.isPublic
|
||||
formData.formNo = res.data.formNo
|
||||
formData.orderNo = res.data.orderNo
|
||||
formData.status = res.data.status
|
||||
formData.content = res.data.content
|
||||
if (res.data.copyFields) {
|
||||
checkedList.value = res.data.copyFields.split(',')
|
||||
}
|
||||
} else {
|
||||
formData.id = ''
|
||||
formData.templateName = ''
|
||||
formData.permissionId = ''
|
||||
formData.permissionName = ''
|
||||
formData.isPublic = ''
|
||||
formData.formNo = ''
|
||||
formData.orderNo = ''
|
||||
formData.status = ''
|
||||
formData.content = ''
|
||||
checkedList.value = []
|
||||
}
|
||||
setModalProps({ loading: false })
|
||||
})
|
||||
|
||||
async function handleSave(exit) {
|
||||
try {
|
||||
setModalProps({ confirmLoading: true, loading: true })
|
||||
// TODO custom api
|
||||
if (checkedList.value && checkedList.value.length) {
|
||||
formData.copyFields = String(checkedList.value)
|
||||
}
|
||||
loading.value = true
|
||||
const res: API.DataResult = await EditFormCopy(formData)
|
||||
loading.value = false
|
||||
if (res.succeeded) {
|
||||
createMessage.success(res.message)
|
||||
emit('success')
|
||||
} else {
|
||||
createMessage.error(res.message)
|
||||
}
|
||||
exit && closeModal()
|
||||
} finally {
|
||||
// loading.value = false;
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.copy-form-model {
|
||||
.ant-form-item-label {
|
||||
padding-bottom: 0;
|
||||
label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue