tofly_abys_web/src/views/mis/codingManagement/chargingUnit-List.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 { chargingUnit } from "@/views/mis/common/api/codingManagement.js";
import tfTable from "@/views/mis/common/misTable/index.vue";
import tfDetail from "./chargingUnit-form.vue";
export default {
  components: { tfTable, tfDetail },
  props: ["data"],
  data() {
    return {
      /* ----- 主页 ----- */
      queryParams: {
        searchText: "",
      },
      disabledModify: true,
      disabledDelete: true,
      editType: true, //编辑类型，true：新增；false：修改
      loading: false, // 控制表格查询时
      pageInfo: {
        current: 1,
        size: 10,
        tableTotal: 1,
        "orders[0].asc": "true",
        "orders[0].column": "gsbm",
      }, // 分页数据
      columns: [
        {
          label: "代收公司编码",
          prop: "gsbm",
          align: "center",
          sortable: true,
        },
        {
          label: "代收公司名称",
          prop: "gsmc",
          align: "center",
        },   
        {
          label: "公司地址",
          prop: "gsdz",
          align: "center",
        },   
        {
          label: "联系电话",
          prop: "lxdh",
          align: "center",
        },  
        {
          label: "是否启用",
          prop: "disabled",
          align: "center",
          formatter: function (row, column, cellValue, index) {
            return cellValue == 1 ? "是" : "否";
          },
        },
        {
          label: "操作人员",
          prop: "czryxm",
          align: "center",
        },
        {
          label: "操作时间",
          prop: "czsj",
          align: "center",
          sortable: true,
        },
      ],
      dataList: [], // 表格数据
      selectionsData: [], // 表格选中数据
      selectedRow: {}, //表格选中行

      /* ----- 详情页 ----- */
      dialogTitle: "新增",
      editState: false, //编辑状态，true：禁用；false：启用
      dialogVisible: false,
      detailData: {
        gsbm: undefined,
        gsmc: undefined,
        gsdz:undefined,
        lxdh:undefined,
        czsj: undefined,
        disabled: undefined,
        czryxm: 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;
      chargingUnit.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.czry = this.$store.state.user.userId;
      params.czryxm = this.$store.state.user.realName;

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

      chargingUnit.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;
      });

      chargingUnit.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.czryxm = this.$store.state.user.realName;
      this.detailData.czsj = 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>