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