twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: some small chang

Browse Source
This commit is contained in:
xiaoxian521
2021-04-29 03:12:44 +08:00
parent b1751beab9
commit 074213c656
6 changed files with 239 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/views/system/dict.vue
View File

@@ -1,15 +1,20 @@
<template>
<div class="dict-container">
<!-- 工具栏 -->
<vxe-toolbar>
<template #buttons>
<vxe-input
v-model="demo1.filterName"
v-model="dictData.filterName"
:placeholder="$t('message.hssearch')"
@keyup="searchEvent"
></vxe-input>
</template>
<template #tools>
<vxe-button icon="el-icon-circle-plus-outline" status="primary">{{$t('message.hsadd')}}</vxe-button>
<vxe-button
icon="el-icon-circle-plus-outline"
status="primary"
@click="onAdd"
>{{$t('message.hsadd')}}</vxe-button>
<vxe-button
icon="el-icon-folder-opened"
status="primary"
@@ -23,108 +28,75 @@
</template>
</vxe-toolbar>
<!-- 列表 -->
<vxe-table
ref="xTree"
border
resizable
:tree-config="{children: 'children', iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}"
:data="demo1.tableData"
:data="dictData.tableData"
@cell-dblclick="cellDBLClickEvent"
>
<vxe-table-column tree-node field="name" title="字典名称"></vxe-table-column>
<vxe-table-column field="model" title="字典类型"></vxe-table-column>
<vxe-table-column title="字典类型">
<template #default="{ row }">
<el-tooltip effect="dark" :content="'双击复制：'+row.model" placement="top-end">
<span class="text-model">{{ row.model }}</span>
</el-tooltip>
</template>
</vxe-table-column>
<vxe-table-column title="操作" width="330" fixed="right">
<template #default="{ row }">
<vxe-button type="text" icon="el-icon-edit" @click="demo1.value8 = true">编辑</vxe-button>
<vxe-button type="text" icon="el-icon-circle-plus-outline">新增子类型</vxe-button>
<vxe-button type="text" icon="el-icon-edit" @click="onEdit(row)">编辑</vxe-button>
<vxe-button type="text" icon="el-icon-circle-plus-outline" @click="onAddChild(row)">新增子类型</vxe-button>
<vxe-button v-show="row.model" type="text" icon="el-icon-setting">字典配置</vxe-button>
<vxe-button type="text" icon="el-icon-delete" @click="confirmEvent">删除</vxe-button>
</template>
</vxe-table-column>
</vxe-table>
<!-- 配置弹框 -->
<vxe-modal
v-model="demo1.showEdit"
:title="demo1.selectRow ? '编辑&保存' : '新增&保存'"
width="800"
min-width="600"
min-height="300"
:loading="demo1.submitLoading"
resize
destroy-on-close
width="450"
v-model="dictData.showEdit"
:title="dictData.selectRow ? '编辑' : '新增'"
:loading="dictData.submitLoading"
@hide="$refs.xForm.reset();"
>
<template #default>
<vxe-form
:data="demo1.formData"
:items="demo1.formItems"
:rules="demo1.formRules"
ref="xForm"
:data="dictData.formData"
:items="dictData.formItems"
title-align="right"
title-width="100"
@submit="demo1.submitEvent"
@submit="dictData.submitEvent"
></vxe-form>
</template>
</vxe-modal>
<!-- <vxe-modal
v-model="demo1.value8"
title="记忆功能的窗口"
width="440"
height="230"
show-zoom
resize
remember
>
<template #default>
<vxe-form>
<vxe-form-item span="24">
<template #default>
<vxe-form
:data="demo1.formData3"
:rules="demo1.formRules3"
title-align="right"
title-width="80"
>
<vxe-form-item
title="字典名称"
field="name"
span="24"
:item-render="{name: 'input', attrs: {placeholder: '请输入字典名称'}}"
></vxe-form-item>
<vxe-form-item
title="字典类型"
field="nickname"
span="24"
:item-render="{name: 'input', attrs: {placeholder: '请输入字典类型'}}"
></vxe-form-item>
<vxe-form-item align="right" span="24">
<template #default>
<vxe-button @click="demo1.value8 = false">取消</vxe-button>
<vxe-button status="primary" @click="onEdit">保存</vxe-button>
</template>
</vxe-form-item>
</vxe-form>
</template>
</vxe-form-item>
</vxe-form>
</template>
</vxe-modal>-->
</div>
</template>
<script lang="ts">
import { reactive, ref, nextTick } from "vue";
import { reactive, ref, unref, nextTick } from "vue";
import XEUtils from "xe-utils";
import { cloneDeep } from "lodash-es";
import { templateRef } from "@vueuse/core";
import { useCopyToClipboard } from "/@/utils/useCopyToClipboard";
import {
VxeTablePropTypes,
VxeTableInstance,
VXETable,
VxeTableEvents
VxeTableInstance,
VxeTableEvents,
VxeTablePropTypes,
VxeFormPropTypes
} from "vxe-table";
export default {
setup() {
const demo1 = reactive({
const dictData = reactive({
submitLoading: false,
showEdit: false,
selectRow: null,
filterName: "",
tableData: [
{
@@ -145,26 +117,65 @@ export default {
]
},
{ id: 2, name: "操作系统", model: "operatingSystem" }
]
],
formData: {
name: "",
model: ""
},
formItems: [
{
field: "name",
title: "字典名称",
span: 24,
itemRender: {
name: "$input",
props: { placeholder: "请输入字典名称", clearable: true }
}
},
{
field: "model",
title: "字典类型",
span: 24,
itemRender: {
name: "$input",
props: {
placeholder: "请输入字典类型",
//这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
disabled: true,
clearable: true
}
}
},
{
align: "right",
span: 24,
itemRender: {
name: "$buttons",
children: [
{ props: { type: "submit", content: "提交", status: "primary" } },
{ props: { type: "reset", content: "重置" } }
]
}
}
] as VxeFormPropTypes.Items
});
let originData = cloneDeep(demo1.tableData);
let originData = cloneDeep(dictData.tableData);
const xTree = templateRef<HTMLElement | null>("xTree", null);
// const = ref({} as VxeTableInstance);
const xTree = templateRef<HTMLElement | any>("xTree", null);
const formatDate = (value: any) => {
return XEUtils.toDateString(value, "yyyy-MM-dd HH:mm:ss.S");
};
const handleSearch = () => {
const filterName = XEUtils.toValueString(demo1.filterName).trim();
const filterName = XEUtils.toValueString(dictData.filterName).trim();
if (filterName) {
const options = { children: "children" };
const searchProps = ["name"];
demo1.tableData = XEUtils.searchTree(
dictData.tableData = XEUtils.searchTree(
originData,
item =>
searchProps.some(
@@ -179,7 +190,7 @@ export default {
$table.setAllTreeExpand(true);
});
} else {
demo1.tableData = originData;
dictData.tableData = originData;
}
};
@@ -201,29 +212,74 @@ export default {
});
};
function onEdit() {
demo1.value8 = false;
VXETable.modal.message({
content: "测试数据，不可编辑",
status: "error"
});
function commonFn(value, disabled) {
dictData.selectRow = value;
dictData.showEdit = true;
dictData.formItems[1].itemRender.props.disabled = disabled;
}
const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
// 新增
function onAdd() {
commonFn(null, false);
}
// 新增子类型
function onAddChild(row: any) {
console.log(
"%crow===>>>: ",
"color: MidnightBlue; background: Aquamarine; font-size: 20px;",
row
);
commonFn(null, false);
}
// 编辑
function onEdit(row: any) {
dictData.formData = {
name: row.name,
model: row.model ? row.model : "暂无字典类型"
};
commonFn(row, true);
// VXETable.modal.message({
// content: "测试数据，不可编辑",
// status: "error"
// });
}
// 拷贝当前列表项的数据（字典类型）
const { clipboardRef } = useCopyToClipboard();
const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
clipboardRef.value = unref(row).model;
};
const xTable = ref({} as VxeTableInstance);
const submitEvent = () => {
dictData.submitLoading = true;
setTimeout(() => {
const $table = xTable.value;
dictData.submitLoading = false;
dictData.showEdit = false;
if (dictData.selectRow) {
VXETable.modal.message({ content: "保存成功", status: "success" });
Object.assign(dictData.selectRow, dictData.formData);
} else {
VXETable.modal.message({ content: "新增成功", status: "success" });
$table.insert(dictData.formData);
}
}, 500);
};
return {
demo1,
dictData,
formatDate,
searchEvent,
confirmEvent,
cellDBLClickEvent,
submitEvent,
onEdit,
cellDBLClickEvent
onAddChild,
onAdd
};
}
};
@@ -244,4 +300,9 @@ export default {
.vxe-button.size--medium.type--button {
margin-right: 0.07em;
}
.text-model {
&:hover {
cursor: pointer;
}
}
</style>