guangda/src/page/baseInfo/supply.vue

<template>
  <div>
    <Card style="width:100%" :bordered="false" :dis-hover="true" v-show="!addShow && !editShow">
      <p slot="title">供应商列表</p>
      <div slot="extra">
        <Button @click="newGys" v-if="buttonShow.add">新增供应商</Button>
        <Button @click="exportList" v-if="buttonShow.export">导出明细</Button>
        <!-- <Button @click="editShow = true">测试----编辑</Button> -->
      </div>
      <Row :gutter="10" style="margin-bottom: 10px">
        <Col span="4">
          <Select
            clearable
            v-model="searchForm.ssqy"
            placeholder="所属区域"
            @on-change="ssqyChange"
            multiple
          >
            <Option
              v-for="item in ssqyList"
              :value="item.areaId"
              :key="item.areaId"
            >{{ item.areaName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Select clearable v-model="searchForm.gysfl" placeholder="供应商分类">
            <Option
              v-for="item in gysflList"
              :value="item.detailId"
              :key="item.detailId"
            >{{ item.detailName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Select clearable v-model="searchForm.gyspj" placeholder="供应商评级">
            <Option
              v-for="item in gyspjList"
              :value="item.detailId"
              :key="item.detailId"
            >{{ item.detailName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Input v-model="searchForm.gysbh" placeholder="供应商编号" />
        </Col>
        <Col span="4">
          <Input v-model="searchForm.gysmc" placeholder="供应商名称" />
        </Col>
        <Col span="4">
          <Input v-model="searchForm.lxr" placeholder="供应商联系人或联系电话" />
        </Col>
      </Row>
      <Row :gutter="10" style="margin-bottom: 10px">
        <Col span="4">
          <Select clearable filterable v-model="searchForm.fgcgy" placeholder="分管采购员">
            <Option
              v-for="item in fgcgyList"
              :value="item.userId"
              :key="item.userId"
            >{{ item.userName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Select clearable v-model="searchForm.qyzt" placeholder="启用状态">
            <Option v-for="item in qyztList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Button type="primary" style="width: 80px" @click="searchTableData">查询</Button>
        </Col>
      </Row>
      <Table
        :columns="tableColumn"
        style="width: 100%"
        :data="tableData"
        :height="resizeHeight - 65"
        :loading="tableLoading"
        @on-row-dblclick="goDetail"
      >
        <template slot-scope="{ row, index }" slot="gpEnabledState">
          <span>{{ row.gpEnabledState == "1" ? "未启用" : "启用"}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div>
            <a
              href="javascript:;"
              v-if="buttonShow.edit"
              @click="editRow(row.gpId, row.gpInfoType)"
            >编辑</a>
            <a
              v-if="buttonShow.delete && row.gpInfoType == 1"
              href="javascript:;"
              @click="deleteRow(row.gpId)"
            >删除</a>
          </div>
        </template>
      </Table>
      <Page align="right" :current="pageNum" @on-change="pageChange" :total="pageTotal" show-total />
    </Card>
    <supplyAdd
      ref="add"
      :ssqyList="ssqyList"
      :gysflList="gysflList"
      :gyspjList="gyspjList"
      :fgcgyList="fgcgyList"
      @return="() => {addShow = false ; this.getTableData()}"
      v-show="addShow"
    />
    <supplyEdit
      ref="edit"
      :buttonShow="buttonShow"
      :ssqyList="ssqyList"
      :gysflList="gysflList"
      :gyspjList="gyspjList"
      :fgcgyList="fgcgyList"
      :gp-id="editId"
      :canBeEdit="canBeEdit"
      @return="() => {editShow = false ; this.getTableData()}"
      v-show="editShow"
    />
  </div>
</template>
<script>
import supplyAdd from "./components/supply/supplyAdd";
import supplyEdit from "./components/supply/supplyEdit";
import {
  goodProviderPageList,
  deleteGoodProvider,
  getDictInfoList,
  exportGoodProviderInfo,
  getJobList,
  getAreaList,
  getUserButtons
} from "@/service/getData";
export default {
  name: "supply",
  components: {
    supplyAdd,
    supplyEdit
  },
  data() {
    return {
      canBeEdit: true,
      addShow: false,
      editShow: false,
      // 详情参数
      editId: "",
      // 分页
      pageTotal: 0,
      pageNum: 1,
      //  自适应尺寸↓
      resizeHeight: 100,
      resizeWidth: 100,
      handleWidth: 100,
      buttonShow: {
        add: false,
        edit: false,
        delete: false,
        export: false,
        addPrice: false,
        deletePrice: false,
        editPrice: false
      },
      //   查询参数
      searchForm: {
        ssqy: [], //所属区域
        gysfl: "", //供应商分类
        gyspj: "", //供应商评级
        gysbh: "", //供应商编号
        gysmc: "", //供应商名称
        lxr: "", //供应商联系人or电话
        fgcgy: "", //分管采购员
        qyzt: "" //启用状态
      },
      ssqyList: [],
      gysflList: [],
      gyspjList: [],
      fgcgyList: [],
      qyztList: [
        { label: "未启用", value: "1" },
        { label: "启用", value: "0" }
      ],
      //   表格参数
      tableLoading: false,
      tableColumn: [
        {
          title: "操作",
          slot: "action",
          width: 100
        },
        {
          title: "供应商编码",
          key: "gpNumber",
          tooltip: "true",
          width: 100
        },
        {
          title: "供应商名称",
          key: "gpName",
          tooltip: "true",
          width: 200
        },
        {
          title: "供应商简称",
          key: "gpAbbreviation",
          tooltip: "true"
        },
        {
          title: "联系人",
          key: "gpLinker",
          tooltip: "true"
        },
        {
          title: "联系电话",
          key: "gpLinkTell",
          tooltip: "true"
        },
        // {
        //   title: "供应商分类",
        //   key: "gpClassifyName",
        //   tooltip: "true"
        // },
        // {
        //   title: "供应商评级",
        //   key: "gpGradeName",
        //   tooltip: "true"
        // },
        {
          title: "所属区域",
          key: "gpRegionName",
          tooltip: "true"
        },
        {
          title: "分管采购员",
          key: "gpBuyerName",
          tooltip: "true"
        },
        {
          title: "启用状态",
          slot: "gpEnabledState",
          tooltip: "true"
        },
        {
          title: "创建或同步时间",
          key: "createDate",
          tooltip: "true",
          width: 150
        }
      ],
      tableData: []
    };
  },
  created() {
    this.getTableData();
    this.getUserAuth();
    getAreaList(localStorage.user_id).then(res => {
      this.ssqyList = res.items;
    });
    getJobList().then(res => {
      if (res.status == 200) {
        this.fgcgyList = res.data;
      } else {
        this.$Message.error("获取分管采购员列表失败！");
      }
    });
    getDictInfoList(1).then(res => {
      this.gysflList = res.data;
    });
    getDictInfoList(2).then(res => {
      this.gyspjList = res.data;
    });
  },
  methods: {
    //获取按钮权限
    getUserAuth() {
      //获取用户在当前页面的权限
      var self = this;
      let menuId = sessionStorage.getItem("refresh_child_id");
      let userForm = {
        userId: localStorage.user_id,
        menuId: menuId
      };
      let buttons = [
        "add",
        "edit",
        "delete",
        "export",
        "addPrice",
        "deletePrice",
        "editPrice"
      ];
      getUserButtons(userForm).then(result => {
        if (result.resultCode == "200") {
          result.data.forEach(item => {
            //  item.code
            if (buttons.includes(item.code)) {
              self.buttonShow[item.code] = true;
            }
          });
        }
      });
    },
    goDetail(row, index) {
      // this.editRow(row.gpId, row.gpInfoType,false)
      this.editRow(row.gpId, row.gpInfoType);
      //参考跳转
      // window.open(
      //   `https://test.hajwy.com/purchase-web/#/viewPurchaseApply?id=${row.id}`
      // );
      // window.open(`/#/viewPurchaseApply?id=${row.id}`);
    },
    resizePage() {
      this.resizeHeight = window.innerHeight - 282;
      this.resizeWidth = window.innerWidth;
      // this.handleWidth = this.$refs.handleHolder.offsetWidth;
    },
    ssqyChange(val) {
      if (val.indexOf("all") != -1) {
        this.searchForm.ssqy = ["all"];
      }
    },
    glxmChange(val) {
      if (val.indexOf("all") != -1) {
        this.searchForm.glxm = ["all"];
      }
    },
    //导出明细
    exportList() {
      let postData = {
        queryText: this.searchForm.lxr,
        gpName: this.searchForm.gysmc,
        gpNumber: this.searchForm.gysbh,
        gpClassifyId: this.searchForm.gysfl,
        gpGradeId: this.searchForm.gyspj,
        gpEnabledState: this.searchForm.qyzt,
        gpBuyerId: this.searchForm.fgcgy,
        gpRegionIds:
          this.searchForm.ssqy[0] == "all"
            ? this.ssqyList
            : this.searchForm.ssqy
      };
      exportGoodProviderInfo(postData);
    },
    //供应商详情,默认可编辑
    editRow(id, type, canBeEdit = true) {
      if (type == "2") {
        this.$refs.edit.editing = false;
        this.$refs.edit.canEdit = false;
      }
      this.editId = id;
      this.editShow = true;
      this.canBeEdit = canBeEdit;
      this.$refs.edit.getGys();
    },
    //删除供应商
    deleteRow(id) {
      this.$Modal.confirm({
        title: "删除",
        content: "是否确定删除该供应商？",
        okText: "确定",
        onOk: () => {
          deleteGoodProvider(id).then(res => {
            if ((res.status = 200)) {
              this.$Message.success("删除成功！");
              this.getTableData();
            }
          });
        }
      });
    },
    //新增供应商
    newGys() {
      this.addShow = true;
      this.$refs.add.initData();
    },
    //列表方法
    getTableData() {
      let data = {
        queryText: this.searchForm.lxr,
        gpName: this.searchForm.gysmc,
        gpNumber: this.searchForm.gysbh,
        gpClassifyId: this.searchForm.gysfl,
        gpGradeId: this.searchForm.gyspj,
        gpEnabledState: this.searchForm.qyzt,
        gpBuyerId: this.searchForm.fgcgy,
        gpRegionIds:
          this.searchForm.ssqy[0] == "all"
            ? this.ssqyList
            : this.searchForm.ssqy
      };
      let pageStr = 10 + "/" + this.pageNum;
      this.tableLoading = true;
      goodProviderPageList(data, pageStr).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.tableData = res.data.records;
          this.pageTotal = res.data.total;
        } else {
          this.$Message.error("获取供应商信息失败。");
        }
        this.tableLoading = false;
      });
    },
    searchTableData() {
      this.pageNum = 1;
      this.getTableData();
    },
    //分页页码回调
    pageChange(page) {
      this.pageNum = page;
      this.getTableData();
    }
  },
  mounted: function() {
    //  监听浏览器页面尺寸
    window.addEventListener("resize", this.resizePage);
    this.resizePage();
  }
};
</script>

<style lang="scss" scoped>
ivu-card-head-inner,
.ivu-card-head p {
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #17233d;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
}
</style>