<!-- Vue SFC -->
<template>
<div class="h tableTransparent bxs page-box page-box-top65">
<!-- 头部返回条 -->
<div class="page-fixed bxs p10 clearfix">
<div class="header clearfix bxs">
<div class="header-item header-lf cupo" @click="backFn">
<i class="el-icon-arrow-left"></i>
<span class="header-lf-btn cor6">返回</span>
</div>
<div class="header-item header-mid h"></div>
<div class="header-item header-rt h"></div>
</div>
</div>
<!-- 列表 -->
<div class="page-content p10 h clearfix bxs">
<div class="page-back-fff bxs p10">
<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
:data="tableData"
border
style="width: 100%"
ref="tableCheck"
empty-text=" "
:header-cell-style="{ 'text-align': 'center' }"
>
<el-table-column type="selection" width="55" align="center">
</el-table-column>
<el-table-column
prop="dictSort"
label="排序值"
width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="dictLabel"
label="名称"
width="180"
align="center"
>
</el-table-column>
<el-table-column
prop="dictValue"
label="数据值"
width="180"
align="center"
>
</el-table-column>
<el-table-column prop="remark" label="描述" min-width="180">
</el-table-column>
<el-table-column prop="address" label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="editFn(scope.row)">编辑</el-button>
<!-- 删除相关操作4 -->
<el-button type="text" @click="delectRowFn(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页固定不变3 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 表单 -->
<!-- 注： dictType按实际开发参数调整 -->
<el-dialog
:title="form.dictType ? '编辑' : '新增'"
:visible.sync="dialogFormVisible"
width="30%"
>
<el-form
v-if="dialogFormVisible"
ref="form"
:rules="rules"
:model="form"
label-width="20%"
>
<el-form-item label="状态" prop="status">
<el-col :span="22">
<el-select class="w" v-model="form.status" placeholder="">
<el-option label="启用" value="0"></el-option>
<el-option label="禁用" value="1"></el-option>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="名称" prop="dictLabel">
<el-col :span="22">
<el-input
v-model="form.dictLabel"
maxlength="50"
show-word-limit
></el-input>
</el-col>
</el-form-item>
<el-form-item label="数据值" prop="dictValue">
<el-col :span="22">
<el-input
maxlength="50"
show-word-limit
v-model="form.dictValue"
></el-input>
</el-col>
</el-form-item>
<el-form-item label="排序值" prop="dictSort">
<el-col :span="22">
<el-input
maxlength="10"
show-word-limit
v-model="form.dictSort"
></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 {
getDicDatatList,
addDictData,
updateData,
} from "@/api/base_baseDict";
import { getDictTypeList } from "@/api/sys";
import PicNone from "@/components/common/group/picNone";
import { mixins } from "@/mixins";//全局混入1
export default {
name: "basePersonList",
components: { PicNone },
mixins: [mixins],//全局混入2
// 状态关联关键词*
// 全局混入
// 保存表单校验
// 删除相关操作
// 分页固定不变
data () {
return {
// 新增变量区
// #region
// #endregion
// 参数变更区
// #region
dialogFormVisible: false,
form: {
status: "",
dictLabel: "",
remark: "",
dictSort: "",
dictName: "",
dictValue: "",
},
rules: {
status: [{ required: true, message: "请判断状态", trigger: "blur" }],
dictLabel: [{ required: true, message: "请输入名称", trigger: "blur" }],
dictValue: [
{ required: true, message: "数据值必填", trigger: "blur" },
{
pattern: /[0-9a-zA-Z_]/,
message: "请输入字母或数字或_",
trigger: "blur",
},
],
dictSort: [
{
pattern: /[0-9]/,
message: "请输入数字",
trigger: "blur",
},
],
},
formSesrch: {
name: "",
region: "",
},
// #endregion
// #region
listRow: "",//列表页查详情参数
formCopy: {},//备份初始化数据
tableData: [],//列表参数
loading: false,//列表加载动画
page: {//列表分页对象
index: 1, //当前页
size: 10, //每页条数
total: 0, //总条数
},
firstSure: true, //判断是不是第一次进入，缓存过的页面用 非缓存页不需要
// #endregion
};
},
created () {
this.headData();
if (this.$route.query.listRow) {
this.listRow = this.$route.query.listRow;
this.formCopy = JSON.parse(JSON.stringify(this.form));
this.getData();
} else {
this.backFn();
}
},
mounted () { },
methods: {
// 基础数据
async headData () {
const res = await getDictTypeList({
dictType: "sys_normal_disable",
status: 0,
});
},
// 获取基本列表数据
async getData () {
let datVal = {
dictType: this.listRow.dictType,
pageNum: this.page.index,
pageSize: this.page.size,
};
console.log(datVal);
this.loading = true;
const result = await getDicDatatList(datVal);
console.log(result);
if (result.data) {
this.tableData = result.data;
this.page.index = result.pageNum;
this.page.total = result.total;
}
this.loading = false;
},
// 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) {
// 额外手动校验
if (form.dictValue.indexOf(",") != -1) {
this.$message.warning("数据值不包含,号");
return
}
this.saveFn();
} else {
return false;
}
});
},
// 保存表单校验2 结束
async saveFn () {
let form = this.form;
var datVal = {
...form
};
console.log(datVal);
let result = null;
if (form.dictCode) {
result = await updateData(datVal);
if (result.code && result.code !== 200) {
return
}
this.getData();
this.$message.success("修改成功");
} else {
result = await addDictData(datVal);
if (result.code && result.code !== 200) {
return
}
this.getData();
this.$message.success("新增成功");
}
},
// 保存表单校验3 新增
addFn () {
// 初始化数据
this.form = { ...this.formCopy };
this.dialogFormVisible = true;
},
// 保存表单校验4 编辑
editFn (row) {
// 初始化数据
this.form = { ...row };
this.dialogFormVisible = true;
},
// #endregion
// page操作区----------------------------end
// #endregion
// page分页区----------------------------end
// page分页搜索区----------------------------start
// #region
// 返回
backFn () {
this.$router.back();
},
// 查询按钮 练习
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>
