tofly_pxys_web/src/views/mis/codingManagement/payMode-index.vue

<template>
  <div class="mis-pageBox">
    <!-- 主页 -->
    <el-container>
      <el-header height="40px">
        <el-row>
          <el-col :span="18">
            <el-input v-model="queryParams.searchText" size="small" style="width: 300px" placeholder="输入关键字" clearable
              @keyup.enter.native="clickQuery()" />
            <el-button type="primary" size="small" icon="el-icon-search" @click="clickQuery()">查询</el-button>
          </el-col>
          <el-col :span="6" class="list-opCol">
            <!-- <el-button type="primary" size="small" icon="el-icon-plus" @click="clickAdd()">添加</el-button> -->
            <el-button type="primary" size="small" icon="el-icon-edit" @click="clickModify()"
              :disabled="disabledModify">修改</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="clickDelete()"
              :disabled="disabledDelete">删除</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <tfTable :table-data="dataList" :column="columns" :for-id="false" :pagination="false"
          :currentpage="pageInfo.current" :pagesize="pageInfo.size" :total="pageInfo.tableTotal" :border="true"
          :multiple="true" :fixed="true" :isdelete="false" :is-select="false" :stripe="true"
          @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"
          @handleSelectionChange="handleSelectionChange" @rowDblclick="showDetail" @detail="showDetail" />
      </el-main>
    </el-container>
    <!-- 详情页 -->
    <el-dialog v-if="dialogVisible" v-dialogDrag top="20vh" :title="dialogTitle" :visible.sync="dialogVisible"
      width="800px" class="dialog">
      <tfDetail :detailData="detailData" :editState="editState" ref="dForm" />
      <template slot="footer">
        <el-button type="warning" icon="el-icon-check" @click="clickSave()" v-if="!editState">确 定</el-button>
        <el-button type="warning" icon="el-icon-close" @click="clickCancel()">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
<script>
import "@/views/mis/common/assets/styles/misStyle.scss";
import { DateHelper } from "@/views/mis/common/assets/scripts/utils.js";
import { PayMode } from "@/views/mis/common/api/codingManagement.js";
import tfTable from "@/views/mis/common/misTable/index.vue";
import tfDetail from "./payMode-form.vue";
export default {
  name: "payMode",
  components: { tfTable, tfDetail },
  props: ["data"],
  data() {
    return {
      /* ----- 主页 ----- */
      queryParams: {
        searchText: "",
      },
      disabledModify: true,
      disabledDelete: true,
      editType: true, //编辑类型，true：新增；false：修改
      loading: false, // 控制表格查询时
      pageInfo: {
        current: 1,
        size: 100,
        tableTotal: 1,
        "orders[0].asc": "true",
        "orders[0].column": "code",
      }, // 分页数据
      columns: [
        {
          label: "编码",
          prop: "code",
          align: "center",
          sortable: true,
        },
        {
          label: "名称",
          prop: "name",
          align: "center",
        },
        {
          label: "是否启用",
          prop: "isdisabled",
          align: "center",
          formatter: function (row, column, cellValue, index) {
            return cellValue == 1 ? "是" : "否";
          },
        },
        {
          label: "档案是否启用",
          prop: "yhIsdisabled",
          align: "center",
          formatter: function (row, column, cellValue, index) {
            return cellValue == 1 ? "是" : "否";
          },
        },
        {
          label: "余额滚动标志",
          prop: "yegdbz",
          align: "center",
          formatter: function (row, column, cellValue, index) {
            return cellValue == 1 ? "参与滚动" : "不参与滚动";
          },
        },
        {
          label: "操作人员",
          prop: "oname",
          align: "center",
        },
      ],
      dataList: [], // 表格数据
      selectionsData: [], // 表格选中数据
      selectedRow: {}, //表格选中行

      /* ----- 详情页 ----- */
      dialogTitle: "新增",
      editState: false, //编辑状态，true：禁用；false：启用
      dialogVisible: false,
      detailData: {
        code: undefined,
        name: undefined,
        isdisabled: undefined,
        yhIsdisabled: undefined,
        yegdbz: undefined,
        oname: undefined,
      },
    };
  },
  watch: {
    selectionsData(value) {
      this.disabledModify = this.selectionsData.length !== 1;
      this.disabledDelete = this.selectionsData.length == 0;
    },
    dialogVisible(newVal, oldVal) {
      if (!newVal) {
        this.resetDetailData();
      }
    },
  },
  created() { },
  mounted() {
    this.bindList();
  },
  methods: {
    /* ----- 方法 ----- */
    /**
     * @description 绑定列表
     */
    bindList() {
      // 追加分页参数
      let params = Object.assign({}, this.pageInfo, this.queryParams);
      this.dataList = [];
      this.loading = true;
      PayMode.query(params)
        .then((res) => {
          if (res.code !== 1) {
            this.$message.error("查询失败!");
            return;
          }
          // 数据总数
          this.pageInfo.tableTotal = res.result.total;
          this.dataList = res.result.records;
        })
        .catch((ex) => {
          this.$message.error("查询失败！");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    resetDetailData() {
      // 表单数据
      for (var key in this.detailData) {
        //console.log("key值：" + key)
        this.detailData[key] = undefined;
      }
    },
    add() {
      let params = Object.assign({}, this.detailData);
      params.ocode = this.$store.state.user.userId;
      params.oname = this.$store.state.user.realName;

      PayMode.add(params).then((res) => {
        if (res.code == 1) {
          this.bindList();
          this.$message.success("添加成功!");
          this.dialogVisible = false;
        }
      });
    },
    modify() {
      let params = Object.assign({}, this.detailData);
      params.ocode = this.$store.state.user.userId;
      params.oname = this.$store.state.user.realName;
      // params.cdate = DateHelper.getNowFormatDate(true);

      PayMode.modify(params).then((res) => {
        if (res.code == 1) {
          this.bindList();
          this.$message.success("修改成功!");
          this.dialogVisible = false;
        }
      });
    },
    delete() {
      const ids = this.selectionsData.map((item) => {
        return item.code;
      });

      PayMode.delete({ ids: ids.join(",") }).then((res) => {
        if (res.code == 1) {
          this.bindList();
          this.$message.success("删除成功!");
        }
      });
    },
    /**
     * @description 显示详情
     */
    showDetail(data) {
      this.selectedRow = data;
      this.detailData = Object.assign({}, this.selectedRow);

      this.dialogTitle = "查看";
      this.editState = true;
      this.dialogVisible = true; // 显示弹窗
    },

    /* ----- dom事件 ----- */
    /**
     * @description 查询
     */
    clickQuery() {
      this.pageInfo.current = 1;
      this.bindList();
    },
    /**
     * @description 添加
     */
    clickAdd() {
      this.detailData.oname = this.$store.state.user.realName;
      this.detailData.cdate = DateHelper.getNowFormatDate(true);

      this.editType = true;
      this.dialogTitle = "添加";
      this.editState = false;
      this.dialogVisible = true; // 显示弹窗
    },
    /**
     * @description 修改
     */
    clickModify() {
      this.selectedRow = this.selectionsData[0];
      this.detailData = Object.assign({}, this.selectedRow);

      this.editType = false;
      this.dialogTitle = "修改";
      this.editState = false;
      this.dialogVisible = true; // 显示弹窗
    },
    /**
     * @description 删除
     */
    clickDelete() {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.delete();
      });
    },
    clickCancel() {
      this.dialogVisible = false; // 关闭弹窗
    },
    clickSave() {
      let flag = this.$refs.dForm.validate();
      if (flag) {
        if (this.editType) this.add(); // 新增
        else this.modify(); // 修改
      }
    },

    /* ----- 组件事件 ----- */
    /**
     * @description 改变当前页
     */
    handleCurrentChange(current) {
      this.pageInfo.current = current;
      this.bindList();
    },
    /**
     * @description 分页每页条数
     */
    handleSizeChange(size) {
      this.pageInfo.size = size;
      this.bindList();
    },
    /**
     * @description 选择改变
     */
    handleSelectionChange(rows) {
      this.selectionsData = rows;
    },
  },
};
</script>
<style lang="scss" scoped></style>