lz_web_qwgl/src/views/backOfficeSystem/kaoQinGL/liuChengGL/index.vue

<template>
  <!-- <div> 作息签注</div> -->
  <div class="main-box">
    <div class="tableCnt">
      <div class="titleBox">
        <div class="title">流程管理</div>
        <div class="btnBox">
          <el-button type="primary" @click="addEdit('add', '')">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </div>
      </div>

      <div ref="searchBox">
        <Search :searchArr="searchConfiger" @submit="onSearch" />
      </div>
      <div class="tabBox">
        <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
          <!-- 控制按钮 -->
          <template #controls="{ row }">
            <el-link type="primary" @click="addEdit('edit', row)">修改</el-link>
            <span class="linkGapLine">|</span>
            <el-link type="primary" @click="handleDelete(row.id)">删除</el-link>
          </template>
        </MyTable>
        <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="tableHeight" :pageConfiger="{
            ...pageData.pageConfiger,
            total: pageData.total
          }" />
      </div>
    </div>

  </div>
  <!-- 新增-编辑 -->
  <EditAddForm ref="addEditDialog" @updateList="getList"  />
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import Search from "@/components/aboutTable/Search.vue";
import { serviceGet, serviceDelete, servicePost } from "@/api/serviceApi.js";
import { ElMessage } from "element-plus";

import EditAddForm from "./editAddForm.vue";

const { proxy } = getCurrentInstance();

// const { D_QW_FA_QWDJ, D_QW_FA_BMDJ, D_QW_FA_ZT } = proxy.$dict(
//   "D_QW_FA_QWDJ",
//   "D_QW_FA_BMDJ",
//   "D_QW_FA_ZT"
// );

const addEditDialog = ref();

const searchConfiger = reactive([

  {
    showType: "input",
    prop: "qzDd",
    placeholder: "请输入考勤类型",
    label: "考勤类型"
  },
  {
    showType: "input",
    prop: "qzrXm",
    placeholder: "请输入通过条件",
    label: "通过条件"
  },

]);
const pageData = reactive({
  tableData: [], //  表格数据
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    showSelectType: "null"
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 160, //操作栏宽度
  tableColumn: [
    // 考勤类型 业务类型， 考勤时长， 通过条件
    { label: "考勤类型", prop: "qzDd", showOverflowTooltip: true },
    {
      label: "业务类型",
      prop: "qzSj",
      showOverflowTooltip: true,
      // width: 100
    },
      {
      label: "考勤时长",
      prop: "qzrXm",
      showOverflowTooltip: true,
      // width: 100
    },
    {
      label: "通过条件",
      prop: "qzSm",
      showOverflowTooltip: true,
      // width: 100
    },
  ]
});
const searchBox = ref(null); // 搜索盒子
const keyCount = ref(0); //tabel组件刷新值
const tableHeight = ref(); // 表格高度
const treeHeight = ref(""); // 树高度
const listQuery = ref({});

// mounted
onMounted(() => {
  tabHeightFn();
  getList();
  proxy.mittBus.on("mittFn", (data) => {
    console.log('组件刷新值data',data);
    keyCount.value = data;
  });
});
const onSearch = (val) => {
  pageData.pageConfiger.pageCurrent = 1;
  listQuery.value = { ...listQuery.value, ...val };
  getList();
};
// 详情借用新增和修改的页面
const seeDetail = (type, row) => {
  addEdit(type, row);
};
// 新增和修改
const addEdit = (type, row) => {
  addEditDialog.value.init(type, row);
};
// 改变分页
const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getList();
};
//  页数
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList();
};
// 获取列表
const getList = () => {
  let params = { ...listQuery.value, ...pageData.pageConfiger };
  pageData.tableConfiger.loading = false;
  serviceGet(params, "/mosty-qwzx/tbQwglZxqz/selectPage")
    .then((res) => {
      pageData.tableConfiger.loading = false;
      pageData.tableData = res.records || [];
      pageData.total = res.total;
    })
    .catch(() => {
      pageData.tableConfiger.loading = false;
    });
};
// 处理删除数据
const handleDelete = (id) => {
  proxy
    .$confirm("确定要注销", "警告", { type: "warning" })
    .then(() => {
      // tbQwglQwfa
      serviceDelete({}, "/mosty-qwzx/tbQwglZxqz/" + id).then((res) => {
        proxy.$message.success("注销成功");
        getList({});
      });
    })
    .catch(() => {
      proxy.$message.info("已取消");
    });
};

// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 250;
  window.onresize = function () {
    tabHeightFn();
  };
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.main-box {
  display: flex;
  .tableCnt {
    flex: 1;
    margin-left: 10px;
  }
}
.tag {
  padding: 2px 6px;
  margin: 0 1px;
  border: 1px solid rgb(111, 180, 225);
  border-radius: 4px;
  white-space: nowrap;
  background: #ecf5ff;
  color: #409eff;
  font-size: 12px;
}
</style>