pc列表页（缓存）

<!-- 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>