parent
bcb21b93cd
commit
0d11e6a80d
@ -0,0 +1,150 @@
|
|||||||
|
<template>
|
||||||
|
<vxe-modal class-name="csty-bi-lei-qi-form" v-model="refShow" width="800" height="360" show-zoom show-footer
|
||||||
|
:mask-closable=true>
|
||||||
|
<template #title>
|
||||||
|
<span style="color:#ffffff">{{ modalTitle }}</span>
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<a-card :bordered="false">
|
||||||
|
<vxe-form title-colon ref="refFormA" title-align="right" title-width="150" :data="formDataA"
|
||||||
|
:rules="formRulesA" @submit="fnSubmitA">
|
||||||
|
<vxe-form-gather span="24">
|
||||||
|
<vxe-form-item span="24">
|
||||||
|
<template #default="params">
|
||||||
|
<div
|
||||||
|
style="font-size: larger;border-bottom: solid 1px #606266;padding: 0px 0px 5px 0px;">
|
||||||
|
用户信息
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</vxe-form-item>
|
||||||
|
</vxe-form-gather>
|
||||||
|
<vxe-form-gather span="24">
|
||||||
|
<vxe-form-item title="用户名" field="UserName" span="20">
|
||||||
|
<template #default="params">
|
||||||
|
<vxe-input v-model="params.data.UserName" placeholder="请输入用户名" clearable :disabled="formTypeA == add"
|
||||||
|
@change="fnChangeA(params)"></vxe-input>
|
||||||
|
</template>
|
||||||
|
</vxe-form-item>
|
||||||
|
<vxe-form-item title="新密码" field="Password" span="24">
|
||||||
|
<template #default="params">
|
||||||
|
<vxe-input v-model="params.data.Password" placeholder="请输入新密码" clearable
|
||||||
|
@change="fnChangeA(params)"></vxe-input>
|
||||||
|
</template>
|
||||||
|
</vxe-form-item>
|
||||||
|
</vxe-form-gather>
|
||||||
|
</vxe-form>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<vxe-button type="submit" status="primary" content="保存" @click="fnSubmitA"></vxe-button>
|
||||||
|
<vxe-button type="reset" content="取消" @click="fnEventCancel"></vxe-button>
|
||||||
|
</template>
|
||||||
|
</vxe-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="BiLeiQiForm">
|
||||||
|
import { ref, onMounted, computed } from 'vue'
|
||||||
|
import { map as _map } from 'lodash'
|
||||||
|
import { VXETable } from 'vxe-table'
|
||||||
|
import * as comApi from '@/api/gw/com'
|
||||||
|
|
||||||
|
// 定义事件[success]
|
||||||
|
const emit = defineEmits(['success'])
|
||||||
|
// 是否显示
|
||||||
|
const refShow = ref(false)
|
||||||
|
// 弹窗标题
|
||||||
|
const modalTitle = ref('未知表单')
|
||||||
|
// 表单
|
||||||
|
const refFormA = ref()
|
||||||
|
// 表单类型[add - 新增|update - 修改|del - 删除]
|
||||||
|
const formTypeA: any = ref('')
|
||||||
|
// 表单A - 初始数据
|
||||||
|
const formDataAInit: any = {
|
||||||
|
Id: 0,
|
||||||
|
UserName: "",
|
||||||
|
Password: ""
|
||||||
|
}
|
||||||
|
const fnChangeA = (params: any) => {
|
||||||
|
const $form = refFormA.value
|
||||||
|
if ($form) {
|
||||||
|
$form.updateStatus(params)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 表单数据
|
||||||
|
const formDataA: any = ref(formDataAInit)
|
||||||
|
// 表单规则
|
||||||
|
const formRulesA: any = ref({
|
||||||
|
Password: [
|
||||||
|
{ required: true, message: '密码不能为空' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
// 挂载
|
||||||
|
onMounted(() => {
|
||||||
|
})
|
||||||
|
// 打开弹窗
|
||||||
|
const open = async (type: string, row?: any) => {
|
||||||
|
formTypeA.value = type
|
||||||
|
await fnResetA()
|
||||||
|
switch (type) {
|
||||||
|
case 'add':
|
||||||
|
refShow.value = true
|
||||||
|
modalTitle.value = '添加用户'
|
||||||
|
break;
|
||||||
|
case 'edit':
|
||||||
|
refShow.value = true
|
||||||
|
modalTitle.value = '修改密码'
|
||||||
|
const paramsA = {
|
||||||
|
"filter": {
|
||||||
|
"field": "ID",
|
||||||
|
"operator": "Eq",
|
||||||
|
"value": row.ID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const rowInfoA = await comApi.getUser(paramsA)
|
||||||
|
console.log(rowInfoA)
|
||||||
|
formDataA.value = rowInfoA.Data
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 提交
|
||||||
|
const fnSubmitA = async () => {
|
||||||
|
switch (formTypeA.value) {
|
||||||
|
case 'add':
|
||||||
|
const paramsA = {
|
||||||
|
data: formDataA.value
|
||||||
|
}
|
||||||
|
await comApi.saveUser(paramsA)
|
||||||
|
VXETable.modal.message({ content: '新增成功', status: 'success' })
|
||||||
|
break;
|
||||||
|
case 'edit':
|
||||||
|
let setVal: any = _map(formDataA.value, (o1, k1) => {
|
||||||
|
return { field: k1, value: o1 }
|
||||||
|
})
|
||||||
|
const paramsB = {
|
||||||
|
filter: {
|
||||||
|
field: 'ID',
|
||||||
|
value: formDataA.value.ID
|
||||||
|
},
|
||||||
|
set: setVal
|
||||||
|
}
|
||||||
|
await comApi.editUser(paramsB)
|
||||||
|
VXETable.modal.message({ content: '修改成功', status: 'success' })
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
refShow.value = false
|
||||||
|
emit('success')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提供open方法打开弹窗
|
||||||
|
defineExpose({ open })
|
||||||
|
// 重置
|
||||||
|
const fnResetA = () => {
|
||||||
|
formDataA.value = formDataAInit
|
||||||
|
}
|
||||||
|
// 关闭窗体
|
||||||
|
const fnEventCancel = () => {
|
||||||
|
refShow.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
Loading…
Reference in new issue