pc详情页二（table）

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