<!-- Vue SFC -->
<template>
<div class="h tableTransparent bxs page-box">
<!-- 头部搜索 -->
<div class="page-header w p10 bxs">
<div class="handle-box">
<el-form
:inline="true"
:model="formSearch"
class="demo-form-inline"
label-width="100px"
>
<el-form-item label="字典名称">
<el-input
size="small"
v-model="formSearch.dictName"
placeholder="请输入字典名称"
clearable
@keyup.native.13="searchTextFn"
style="width: 180px"
></el-input>
</el-form-item>
<el-form-item label="字典类型">
<el-select
v-model="formSearch.dictType"
placeholder="请选择资质类型"
style="width: 180px"
clearable
>
<!-- <el-option
v-for="item in workTypes"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option> -->
</el-select>
</el-form-item>
<el-form-item>
<el-button
icon="el-icon-search"
size="small"
type="primary"
@click="searchTextFn"
>查询</el-button
>
<el-button
icon="el-icon-refresh"
size="small"
type="primary"
@click="reloadFn"
>重置</el-button
>
<!-- reloadFn 全局混入3 -->
</el-form-item>
</el-form>
</div>
</div>
<!-- 列表 -->
<div class="page-content bxs p10 scrollbar0">
<div class="page-back-fff bxs p10" style="">
<div class="mb10">
<el-button size="small" type="primary" @click="addFn"
>新 增</el-button
>
<!-- 删除相关操作5 -->
<el-button size="small" type="warning" @click="multipleDelFn"
>删 除</el-button
>
</div>
<!-- el-table -->
<el-table
:data="tableData"
border
style="width: 100%"
ref="tableCheck"
empty-text=" "
v-loading="loading"
>
<template slot="empty" v-if="!loading && tableData.length == 0">
<PicNone />
</template>
<!-- 列宽使用 width min-width 依照原型 和 列的功能 宽度不合理时和产品确认可适当调整 -->
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column
prop="dictId"
label="字典编号"
width="80"
align="center"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
prop="dictName"
label="字典名称"
min-width="100"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
prop="dictType"
label="字典类型"
min-width="160"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
prop="remark"
label="描述"
min-width="200"
:show-overflow-tooltip="true"
>
</el-table-column>
<!-- 列表状态2 变更方法 -->
<el-table-column
width="100"
align="center"
prop="status"
label="账号状态"
>
<template slot-scope="scope">
<!-- <span>{{ scope.row.status == 0 ? "启用" : "禁用" }}</span> -->
<el-switch
@change="changeStatusFn(scope.row)"
v-model="scope.row.status"
active-value="0"
inactive-value="1"
active-color="#FB0000"
inactive-color="#DCDFE6"
>
</el-switch>
</template>
</el-table-column>
<el-table-column
prop="address"
label="操作"
align="center"
width="200"
>
<template slot-scope="scope">
<el-button
type="text"
@click="editFn(scope.row)"
:disabled="scope.row.systemFlag"
>编辑</el-button
>
<el-button type="text" @click="detailFn(scope.row)"
>字典配置</el-button
>
<!-- 删除相关操作4 -->
<el-button
type="text"
@click="delectRowFn(scope.row)"
:disabled="scope.row.systemFlag"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- page -->
<div class="pagination" v-show="!loading && tableData.length > 0">
<el-pagination
background
layout="prev, pager, next, sizes, total, jumper "
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.index"
:page-size="page.size"
:total="page.total"
></el-pagination>
</div>
</div>
</div>
<!-- 保存表单校验5 表单 -->
<!-- 注： dictId按实际开发参数调整 -->
<el-dialog
:title="form.dictId ? '编辑' : '新增'"
:visible.sync="dialogFormVisible"
width="30%"
>
<el-form
v-if="dialogFormVisible"
ref="form"
:rules="rules"
:model="form"
label-width="20%"
>
<el-form-item label="字典名称" prop="dictName">
<el-col :span="22">
<el-input
v-model="form.dictName"
maxlength="50"
show-word-limit
></el-input>
</el-col>
</el-form-item>
<el-form-item label="字典类型" prop="dictType">
<el-col :span="22">
<el-input
maxlength="50"
show-word-limit
v-model="form.dictType"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="描述">
<el-col :span="22">
<el-input
maxlength="250"
show-word-limit
type="textarea"
v-model="form.remark"
></el-input>
</el-col>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitFormFn">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
// 全部接口引入区
import {
getDicTypetList,
addDictType,
updateUser,
delByUserIds,
} from "@/api/base_baseDict";
import { mixins } from "@/mixins";//全局混入1
import PicNone from "@/components/common/group/picNone";//常用缺省图引入
export default {
name: "baseDictList",// name要和路由参数对应,否则页面缓存可能会失效
components: { PicNone },
mixins: [mixins],//全局混入2
// 状态关联关键词*
// 全局混入
// 列表状态
// 保存表单校验
// 删除相关操作
data () {
return {
// 新增变量区
// #region
// #endregion
// 参数变更区
// #region
dialogFormVisible: false,//新增、编辑弹框控制
form: {
dictName: "",//字典名称
status: "0",//状态
dictType: "",//字典类型
remark: "",//描述
},
rules: {//表单校验规则
dictName: [
{ required: true, message: "请输入字典名称", trigger: "blur" },
],
dictType: [
{ required: true, message: "请输入字典类型", trigger: "blur" },
],
},
formSearch: {//搜索条件对象
dictName: "",
dictType: "",
},
// #endregion
// #region
formCopy: {},//备份初始化数据
tableData: [],//列表参数
loading: false,//列表加载动画
page: {//列表分页对象
index: 1, //当前页
size: 10, //每页条数
total: 0, //总条数
},
firstSure: true, //判断是不是第一次进入，缓存过的页面用 非缓存页不需要
// #endregion
};
},
created () {
// 备份初始化数据 二次打开新增弹框用
this.formCopy = JSON.parse(JSON.stringify(this.form));
this.headData();
this.getData();
},
activated () {
if (!this.firstSure) {
this.getData();
}else{
this.firstSure = false;//判断页面是不是第一次进入
}
},
mounted () { },
methods: {
// 基础数据
async headData () {
// const result = await getDictTypeList({
// dictType: "sys_normal_disable",
// status: 0,
// });
// this.sysBtnStatus = result.data;
},
// 获取基本列表数据
async getData () {
let datVal = {
...this.formSearch,
pageNum: this.page.index,
pageSize: this.page.size,
status: 0,
};
this.loading = true;
const result = await getDicTypetList(datVal);
if (result.data) {
this.tableData = result.data;
this.page.index = result.pageNum;
this.page.total = result.total;
}
this.loading = false;
},
// 列表状态1 变更方法
async changeStatusFn (row) {
let datVal = {
userId: row.userId,
status: row.status,
};
// const res = await changeStatusUser(datVal);
// if (result.code && result.code !== 200) {
// return
// }
// this.getData();
// this.$message.success("修改成功");
},
// page操作区----------------------------start
// #region
// 删除相关操作1 批量删除
multipleDelFn () {
// 获取table选中的checkbox
let arr = this.$refs.tableCheck.selection;
if (arr.length == 0) {
this.$message.warning("至少选中一行!");
return;
}
let ids = [];
for (let i = 0; i < arr.length; i++) {
// 注： dictId按时间开发参数调整
ids.push(arr[i].dictId);
}
this.$confirm("是否批量删除？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 删除数量
let deleteNum = ids.length;
// toString() 看接口是否需要
ids = ids.toString();
this.deleteSureFn(ids, deleteNum);
})
.catch(() => { });
},
// 删除相关操作2 单行删除
delectRowFn (row) {
this.$confirm("确认要删除吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 注： dictId按时间开发参数调整
this.deleteSureFn(row.dictId, 1);
})
.catch(() => { });
},
// 删除相关操作3 确定删除
async deleteSureFn (deptId, deleteNum) {
const result = await delByUserIds(deptId + "");
if (result.code && result.code !== 200) {
return
}
this.$message.success("删除成功");
this.resetPageQueryParams(deleteNum); //全局混入3 处理删除最后一页全部数据处理方法
this.getData();
},
// 保存表单校验1 开始
submitFormFn () {
this.$refs["form"].validate((valid) => {
if (valid) {
this.saveFn();
} else {
return false;
}
});
},
// 保存表单校验2 结束
async saveFn () {
let form = this.form;
var datVal = {
...form
};
let result = null;
if (form.dictId) { //dictId存为编辑 // 注： dictId按时间开发参数调整
result = await updateUser(datVal);
if (result.code && result.code !== 200) {
return
}
this.getData();
this.$message.success("修改成功");
} else {
result = await addDictType(datVal);
if (result.code && result.code !== 200) {
return
}
this.getData();
this.$message.success("新增成功");
}
this.dialogFormVisible = false;
},
// 保存表单校验3 新增
addFn () {
// 初始化数据
this.form = { ...this.formCopy };
this.dialogFormVisible = true;
},
// 保存表单校验4 编辑
editFn (row) {
// 初始化数据
this.form = { ...row };
this.dialogFormVisible = true;
},
// 详情跳转
detailFn (row) {
this.$router.push({
name: "baseDictConfig",
query: {
listRow: row,
id: row.id
},
});
},
// #endregion
// page操作区----------------------------end
// page分页搜索区----------------------------start
// #region
// 查询按钮 练习
searchTextFn () {
this.page.index = 1;
this.getData();
},
// 分页固定不变方法1
handleSizeChange: function (val) {
this.page.index = 1;
this.page.size = val;
this.getData();
},
// 分页固定不变方法2
handleCurrentChange: function (val) {
this.page.index = val;
this.getData();
},
// #endregion
// page分页区----------------------------end
},
};
</script>
<style lang="scss" scoped>
</style>
