123
This commit is contained in:
144
cdTMP/src/views/datamanage/dictmanage/dataList.vue
Normal file
144
cdTMP/src/views/datamanage/dictmanage/dataList.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" fullscreen :footer="false">
|
||||
<template #title>维护数据字典 →【{{ currentRow.name }}】</template>
|
||||
<!-- crud组件 -->
|
||||
<div class="lg:w-full w-full lg:ml-4 mt-5 lg:mt-0">
|
||||
<ma-crud :options="crudOptions" :columns="columns" ref="crudRef">
|
||||
<!-- 排序列 -->
|
||||
<template #sort="{ record }">
|
||||
<a-input-number
|
||||
:default-value="record.sort"
|
||||
mode="button"
|
||||
@change="changeSort($event, record.id)"
|
||||
:min="0"
|
||||
:max="1000"
|
||||
/>
|
||||
</template>
|
||||
<!-- 状态列 -->
|
||||
<template #status="{ record }">
|
||||
<a-switch
|
||||
:checked-value="1"
|
||||
unchecked-value="2"
|
||||
@change="changeStatus($event, record.id)"
|
||||
:default-checked="record.status == 1"
|
||||
/>
|
||||
</template>
|
||||
</ma-crud>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick } from "vue"
|
||||
import dictApi from "@/api/system/dict"
|
||||
import { Message } from "@arco-design/web-vue"
|
||||
|
||||
const crudRef = ref()
|
||||
const visible = ref(false)
|
||||
const currentRow = ref({ id: undefined, name: undefined })
|
||||
|
||||
// 改变dictItem的sort字段
|
||||
const changeSort = async (value, id) => {
|
||||
const response = await dictApi.numberOperation({ id, numberName: "sort", numberValue: value })
|
||||
if (response.success) {
|
||||
Message.success(response.message)
|
||||
}
|
||||
}
|
||||
// 改变dictItem状态
|
||||
const changeStatus = async (status, id) => {
|
||||
const response = await dictApi.changeItemStatus({ id, status })
|
||||
if (response.success) {
|
||||
Message.success(response.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开a-modal事件
|
||||
const open = (row) => {
|
||||
currentRow.value = row
|
||||
// 调用固定方法请求数据
|
||||
crudRef.value.requestParams = { id: currentRow.value.id }
|
||||
crudRef.value.requestData()
|
||||
visible.value = true
|
||||
}
|
||||
// crudOptions
|
||||
const crudOptions = ref({
|
||||
autoRequest: false,
|
||||
api: dictApi.getDictItemAll,
|
||||
showIndex: false,
|
||||
rowSelection: { showCheckedAll: true },
|
||||
operationColumn: true,
|
||||
operationWidth: 160,
|
||||
operationColumnAlign:'center',
|
||||
beforeAdd: (form) => {
|
||||
form.id = currentRow.value?.id
|
||||
},
|
||||
add: { show: true, api: dictApi.saveDictItem },
|
||||
edit: { show: true, api: dictApi.updateDictItemData },
|
||||
delete: { show: true, api: dictApi.realDeleteItem },
|
||||
})
|
||||
// crudColumns
|
||||
const columns = ref([
|
||||
{ title: "ID", dataIndex: "id", addDisplay: false, editDisplay: false, width: 50, hide: true },
|
||||
{
|
||||
title: "字典标签",
|
||||
align: "center",
|
||||
dataIndex: "title",
|
||||
search: true,
|
||||
width: 220,
|
||||
commonRules: [{ required: true, message: "字典标签必填" }]
|
||||
},
|
||||
{
|
||||
title: "字典键值",
|
||||
align: "center",
|
||||
dataIndex: "key",
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
search: true,
|
||||
width: 220,
|
||||
commonRules: [{ required: true, message: "字典键值必填" }]
|
||||
},
|
||||
{
|
||||
title: "排序",
|
||||
align: "center",
|
||||
dataIndex: "sort",
|
||||
formType: "input-number",
|
||||
addDefaultValue: 1,
|
||||
width: 180,
|
||||
min: 0,
|
||||
max: 1000
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
align: "center",
|
||||
dataIndex: "status",
|
||||
search: true,
|
||||
addDefaultValue: "1",
|
||||
formType: "radio",
|
||||
dict: { name: "data_status", props: { label: "title", value: "key" } },
|
||||
addDefaultValue: "1",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
align: "center",
|
||||
dataIndex: "remark",
|
||||
hide: true,
|
||||
formType: "textarea"
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
align: "center",
|
||||
dataIndex: "update_datetime",
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
search: true,
|
||||
formType: "range",
|
||||
width: 180
|
||||
}
|
||||
])
|
||||
|
||||
// 暴露自己的open方法
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
114
cdTMP/src/views/datamanage/dictmanage/index.vue
Normal file
114
cdTMP/src/views/datamanage/dictmanage/index.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="ma-content-block lg:flex justify-between p-4">
|
||||
<div class="lg:w-full w-full lg:ml-4 mt-5 lg:mt-0">
|
||||
<!-- CRUD组件 -->
|
||||
<ma-crud :options="crudOptions" :columns="crudColumns">
|
||||
<!-- 字典标识列 -->
|
||||
<template #code="{ record }">
|
||||
<a-tooltip content="点击查看字典数据">
|
||||
<a-link @click="openDictList(record)">
|
||||
{{ record.code }}
|
||||
</a-link>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<!-- 状态列 -->
|
||||
<template #status="{ record }">
|
||||
<a-switch
|
||||
:checked-value="1"
|
||||
unchecked-value="2"
|
||||
@change="changeStatus($event, record.id)"
|
||||
:default-checked="record.status == 1"
|
||||
>
|
||||
</a-switch>
|
||||
</template>
|
||||
<template #operationBeforeExtend="{ record }">
|
||||
<a-link @click="openDictList(record)"><icon-list /> 字典数据</a-link>
|
||||
</template>
|
||||
</ma-crud>
|
||||
</div>
|
||||
|
||||
<data-list ref="datalist"></data-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from "vue"
|
||||
import dictApi from "@/api/system/dict"
|
||||
import { Message } from "@arco-design/web-vue"
|
||||
import DataList from "./dataList.vue"
|
||||
|
||||
const crudRef = ref()
|
||||
const datalist = ref()
|
||||
|
||||
// 打开datalist页面
|
||||
const openDictList = async (row) => {
|
||||
datalist.value.open(row)
|
||||
}
|
||||
|
||||
// 点击切换status
|
||||
const changeStatus = async (status, id) => {
|
||||
const response = await dictApi.changeStatus({ id, status })
|
||||
if (response.success) {
|
||||
Message.success(response.message)
|
||||
}
|
||||
}
|
||||
|
||||
const crudOptions = ref({
|
||||
api: dictApi.getDictIndex,
|
||||
showIndex: false,
|
||||
operationColumnAlign: "center",
|
||||
rowSelection: { showCheckedAll: true },
|
||||
searchColNumber: 4,
|
||||
tablePagination: false,
|
||||
operationColumn: true,
|
||||
})
|
||||
|
||||
const crudColumns = ref([
|
||||
{ title: "ID", dataIndex: "id", addDisplay: false, editDisplay: false, width: 50, hide: true },
|
||||
{
|
||||
title: "字典备注",
|
||||
dataIndex: "remark",
|
||||
search: true,
|
||||
width: 220,
|
||||
align: "center",
|
||||
commonRules: [{ required: true, message: "字典备注必填" }]
|
||||
},
|
||||
{
|
||||
title: "字典标识",
|
||||
dataIndex: "code",
|
||||
search: true,
|
||||
width: 260,
|
||||
align: "center",
|
||||
commonRules: [{ required: true, message: "字典标识必填" }]
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: "status",
|
||||
search: true,
|
||||
formType: "radio",
|
||||
align: "center",
|
||||
dict: { name: "data_status", props: { label: "title", value: "key" } },
|
||||
addDefaultValue: "1",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "字典名称",
|
||||
dataIndex: "name",
|
||||
hide: true,
|
||||
formType: "textarea",
|
||||
align: "center"
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
dataIndex: "update_datetime",
|
||||
addDisplay: false,
|
||||
editDisplay: false,
|
||||
align: "center",
|
||||
search: true,
|
||||
formType: "range",
|
||||
width: 180
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Reference in New Issue
Block a user