first commit
This commit is contained in:
206
src/pages-system/dict/data/form/index.vue
Normal file
206
src/pages-system/dict/data/form/index.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<view class="yd-page-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<wd-navbar
|
||||
:title="getTitle"
|
||||
left-arrow placeholder safe-area-inset-top fixed
|
||||
@click-left="handleBack"
|
||||
/>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view>
|
||||
<wd-form ref="formRef" :model="formData" :rules="formRules">
|
||||
<wd-cell-group border>
|
||||
<wd-cell title="字典类型" title-width="200rpx" prop="dictType" center>
|
||||
<wd-picker
|
||||
v-model="formData.dictType"
|
||||
:columns="dictTypeOptions"
|
||||
label-key="label"
|
||||
value-key="value"
|
||||
:disabled="!!formData.id"
|
||||
placeholder="请选择字典类型"
|
||||
/>
|
||||
</wd-cell>
|
||||
<wd-input
|
||||
v-model="formData.label"
|
||||
label="数据标签"
|
||||
label-width="200rpx"
|
||||
prop="label"
|
||||
clearable
|
||||
placeholder="请输入数据标签"
|
||||
/>
|
||||
<wd-input
|
||||
v-model="formData.value"
|
||||
label="数据键值"
|
||||
label-width="200rpx"
|
||||
prop="value"
|
||||
clearable
|
||||
placeholder="请输入数据键值"
|
||||
/>
|
||||
<wd-input
|
||||
v-model.number="formData.sort"
|
||||
label="显示排序"
|
||||
label-width="200rpx"
|
||||
prop="sort"
|
||||
type="number"
|
||||
clearable
|
||||
placeholder="请输入显示排序"
|
||||
/>
|
||||
<wd-cell title="状态" title-width="200rpx" prop="status" center>
|
||||
<wd-radio-group v-model="formData.status" shape="button">
|
||||
<wd-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</wd-radio>
|
||||
</wd-radio-group>
|
||||
</wd-cell>
|
||||
<wd-cell title="颜色类型" title-width="200rpx" prop="colorType" center>
|
||||
<wd-picker
|
||||
v-model="formData.colorType"
|
||||
:columns="getStrDictOptions(DICT_TYPE.SYSTEM_DICT_COLOR_TYPE)"
|
||||
label-key="label"
|
||||
value-key="value"
|
||||
placeholder="请选择颜色类型"
|
||||
/>
|
||||
</wd-cell>
|
||||
<wd-input
|
||||
v-model="formData.cssClass"
|
||||
label="CSS Class"
|
||||
label-width="200rpx"
|
||||
prop="cssClass"
|
||||
clearable
|
||||
placeholder="请输入 CSS Class，如 #108ee9"
|
||||
/>
|
||||
<wd-textarea
|
||||
v-model="formData.remark"
|
||||
label="备注"
|
||||
label-width="200rpx"
|
||||
prop="remark"
|
||||
clearable
|
||||
placeholder="请输入备注"
|
||||
/>
|
||||
</wd-cell-group>
|
||||
</wd-form>
|
||||
</view>
|
||||
|
||||
<!-- 底部保存按钮 -->
|
||||
<view class="yd-detail-footer">
|
||||
<wd-button
|
||||
type="primary"
|
||||
block
|
||||
:loading="formLoading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
保存
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'wot-design-uni/components/wd-form/types'
|
||||
import type { DictData } from '@/api/system/dict/data'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useToast } from 'wot-design-uni'
|
||||
import { createDictData, getDictData, updateDictData } from '@/api/system/dict/data'
|
||||
import { getSimpleDictTypeList } from '@/api/system/dict/type'
|
||||
import { getIntDictOptions, getStrDictOptions } from '@/hooks/useDict'
|
||||
import { navigateBackPlus } from '@/utils'
|
||||
import { CommonStatusEnum, DICT_TYPE } from '@/utils/constants'
|
||||
|
||||
const props = defineProps<{
|
||||
id?: number | any
|
||||
dictType?: string | any
|
||||
}>()
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
})
|
||||
|
||||
const toast = useToast()
|
||||
const getTitle = computed(() => props.id ? '编辑字典数据' : '新增字典数据')
|
||||
const formLoading = ref(false)
|
||||
const formData = ref<DictData>({
|
||||
id: undefined,
|
||||
dictType: props.dictType || '',
|
||||
label: '',
|
||||
value: '',
|
||||
sort: 0,
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
colorType: '',
|
||||
cssClass: '',
|
||||
remark: '',
|
||||
})
|
||||
const formRules = {
|
||||
dictType: [{ required: true, message: '字典类型不能为空' }],
|
||||
label: [{ required: true, message: '数据标签不能为空' }],
|
||||
value: [{ required: true, message: '数据键值不能为空' }],
|
||||
sort: [{ required: true, message: '显示排序不能为空' }],
|
||||
status: [{ required: true, message: '状态不能为空' }],
|
||||
}
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
/** 字典类型选项 */
|
||||
const dictTypeOptions = ref<{ label: string, value: string }[]>([])
|
||||
|
||||
/** 返回上一页 */
|
||||
function handleBack() {
|
||||
navigateBackPlus('/pages-system/dict/index')
|
||||
}
|
||||
|
||||
/** 加载字典类型列表 */
|
||||
async function loadDictTypeList() {
|
||||
const list = await getSimpleDictTypeList()
|
||||
dictTypeOptions.value = list.map(item => ({
|
||||
label: item.name,
|
||||
value: item.type,
|
||||
}))
|
||||
}
|
||||
|
||||
/** 加载详情 */
|
||||
async function getDetail() {
|
||||
if (!props.id) {
|
||||
return
|
||||
}
|
||||
formData.value = await getDictData(props.id)
|
||||
}
|
||||
|
||||
/** 提交表单 */
|
||||
async function handleSubmit() {
|
||||
const { valid } = await formRef.value.validate()
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
|
||||
formLoading.value = true
|
||||
try {
|
||||
if (props.id) {
|
||||
await updateDictData(formData.value)
|
||||
toast.success('修改成功')
|
||||
} else {
|
||||
await createDictData(formData.value)
|
||||
toast.success('新增成功')
|
||||
}
|
||||
setTimeout(() => {
|
||||
handleBack()
|
||||
}, 500)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await loadDictTypeList()
|
||||
await getDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user