BST_bigScreen/src/views/BasicSettings/CustomerProductPrice/list.vue

<template>
  <div>
    <FullPage
      title="客户产品价格表"
      :list="set_list"
      @init="init"
      :loading="loading"
      @searchData="searchData"
      @changePage="changePage"
      @changeSize="changeSize"
      :tableColums="tableColums"
      :tableData="tableData"
      :page_index="page_index"
      :total="total"
    >
      <div slot="titleButton" style="display:flex;">
        <Upload
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/measure_orders_import'"
        >
          <Button type="success" ghost icon="md-exit" style="margin-right:10px;"
            >导入</Button
          >
        </Upload>
        <Button
          @click="handleSet({}, -1, 1)"
          type="primary"
          style="margin-right:10px;"
          >新增</Button
        >
      </div>
      <template slot="set" slot-scope="{ row, index }">
        <div class="table-set">
          <!-- <a style="margin:0 5px"
             @click="handleSet(row,index,5)">审核</a> -->
          <a style="margin:0 5px" @click="handleSet(row, index, 2)">编辑</a>
          <a style="margin:0 5px" @click="handleSet(row, index, 3)">查看</a>
          <!-- <a style="margin:0 5px"
             @click="handleSet(row,index,6)">变更</a>
          <a style="margin:0 5px"
             @click="handleSet(row,index,7)">变更记录</a> -->
          <a style="margin:0 5px" @click="handleSet(row, index, 4)">删除</a>
        </div>
      </template>
    </FullPage>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "AdditionalProjectIndex",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      loading: false,
      tableData: [],
      page_index: 1,
      total: 0,
      page_size: 10,
      proxyObj: {},
      tableColums: [
        {
          title: "客户分类编码",
          key: "type_code",
          align: "center",
          minWidth: 140,
        },
        {
          title: "客户分类名称",
          key: "type_title",
          align: "center",
          minWidth: 140,
        },
        {
          title: "客户编码",
          key: "code",
          align: "center",
          tooltip: true,
          minWidth: 140,
        },
        {
          title: "客户名称",
          key: "title",
          align: "center",
          tooltip: true,
          minWidth: 140,
        },
        // {
        //   title: '审核人', key: 'service_id', align: 'center', tooltip: true, minWidth: 140,
        //   render: (h, params) => {
        //     const { row } = params
        //     let text
        //     this.userList.forEach(element => {
        //       (element.id == row.service_id) && (text = element.nickname)
        //     });
        //     return h('span', {}, text)
        //   }
        // },
        // {
        //   title: '审核状态', key: 'state', align: 'center', minWidth: 140,
        //   render: (h, params) => {
        //     const { row } = params
        //     let text = row.state == 1 ? '已审核' : row.state == 2 ? '拒绝' : '未审核'
        //     return h('span', {}, text)
        //   }
        // },
        { title: "操作", key: "", align: "center", slot: "set", width: 300 },
      ],
      tableData: [],
      type: null,
      userList: [],
      overStandardList: [],
      headers: { Authorization: localStorage.getItem("token") },
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取用户列表
    this.axios({ method: "get", url: "/api/user" })
      .then((res) => {
        this.userList = res.data.data;
      })
    // 获取超标方案
    this.axios({ method: "get", url: "/api/overdraft_list" })
      .then((res) => {
        this.overStandardList = res.data.data;
      })
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.init(vm.proxyObj);
    });
  },
  methods: {
    init(row) {
      this.proxyObj = row;
      this.axios
        .get("/api/custom_product_list", {
          params: {
            page_index: this.page_index,
            page_size: this.page_size,
            ...row,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.total = res.data.total;
            this.tableData = res.data.data;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    searchData(row) {
      this.page_index = 1;
      this.init(row);
    },
    handleSet(row, index, type) {
      this.type = type;
      // 1新增 2编辑 3查看 4删除 5审核 6变更 7变更记录
      switch (type) {
        case 1:
        case 2:
        case 3:
          this.$router.push({
            path: "/cms/BasicSettings/CustomerProductPrice/detail",
            query: {
              type,
              custom_id: row.custom_id,
            },
          });
          break;
        case 4:
          this.$Modal.confirm({
            title: "确认删除？",
            content: "此操作无法恢复，请确认！",
            onOk: () => {
              this.axios({
                method: "post",
                url: "/api/custom_product_del",
                data: {
                  custom_id: row.custom_id,
                },
              })
                .then((res) => {
                  this.$Message.success(res.msg);
                  this.init(this.proxyObj);
                })
                .catch((err) => {});
            },
            onCancel: () => {},
          });
          break;
        default:
          break;
      }
    },
    changePage(e) {
      this.page_index = e;
      this.init(this.proxyObj);
    },
    changeSize(e) {
      this.page_size = e;
      this.init(this.proxyObj);
    },
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
      this.getData(this.proxyObj);
    },
    uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    async exportData() {
      const res = await this.axios("/api/parts_classify_export", {
        params: { ...this.proxyObj },
      });
      if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`;
        location.href = url;
      }
    },
  },
  // 监听属性 类似于data概念
  computed: {
    set_list() {
      return [
        {
          title: "客户分类编码",
          name: "Input",
          value: "",
          serverName: "type_code",
          placeholder: "请输入客户分类编码",
        },
        {
          title: "客户分类名称",
          name: "Input",
          value: "",
          serverName: "type_title",
          placeholder: "请输入客户分类名称",
        },
        {
          title: "客户编码",
          name: "Input",
          value: "",
          serverName: "code",
          placeholder: "请输入客户编码",
        },
        {
          title: "客户名称",
          name: "Input",
          value: "",
          serverName: "title",
          placeholder: "请输入客户名称",
        },
        {
          title: "审核状态",
          name: "Select",
          value: "",
          placeholder: "请选择审核状态",
          serverName: "state",
          option: [
            { label: "未审核", value: 0 },
            { label: "已审核", value: 1 },
          ],
        },
      ];
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/cms/BasicSettings/CustomerProductPrice/detail") {
      this.$route.meta.keepAlive = true;
    } else {
      this.$route.meta.keepAlive = false;
    }
    next();
  },
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped></style>