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

<template>
  <div class="SippliersList">
    <Toptitle title="客户列表">
      <slot name="titleButton">
        <!-- <Button @click="handleSet()"
                type="primary"
                style="margin-right:10px;">新增分类</Button> -->

        <Upload
          style="display:inline"
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/custom_import'"
        >
          <Button type="success" ghost icon="md-exit" style="margin-right:10px;"
            >导入</Button
          >
         
        </Upload>
        <Button type="success" ghost icon='ios-download-outline' style="margin-right:10px;" @click='exportData()'
            >导出</Button
          >
        <Button
          type="primary"
          @click="handleGoPage(1, '')"
          style="margin-right:10px;"
          >新增</Button
        > 
      </slot>
    </Toptitle>
    <div class="content">
      <div class="content_left">
        <Tree
          :data="treeData"
          select-node
          children-key="sub"
          style="width:100%;"
          @on-select-change="handleTreeSelect"
          class="demo-tree-render"
        ></Tree>
      </div>
      <div class="content_right">
        <div class="content_right_topform">
          <Form :label-width="90" :model="searchData">
            <FormItem label="客户编码:">
              <Input
                type="text"
                size="small"
                clearable
                v-model="searchData.code"
                style="width: 150px"
                placeholder="客户编码"
              />
            </FormItem>
            <FormItem label="客户名称:">
              <Input
                type="text"
                size="small"
                clearable
                v-model="searchData.title"
                style="width: 150px"
                placeholder="客户名称"
              />
            </FormItem>
            <FormItem label="专营业务员:">
              <Select
                v-model="searchData.service_id"
                size="small"
                clearable
                filterable
                label-in-value
                style="width: 150px"
              >
                <Option
                  v-for="sitem in userList"
                  :key="sitem.id"
                  :label="sitem.nickname"
                  :value="sitem.id"
                >
                </Option>
              </Select>
            </FormItem>
            <FormItem label="超标方案:">
              <Select
                v-model="searchData.plan_id"
                size="small"
                clearable
                filterable
                label-in-value
                style="width: 150px"
              >
                <Option
                  v-for="sitem in overStandardList"
                  :key="sitem.id"
                  :label="sitem.title"
                  :value="sitem.id"
                >
                </Option>
              </Select>
            </FormItem>
            <!-- <FormItem label="是否启用:">
              <Select v-model="searchData.lock"
                      size="small"
                      clearable
                      style="width: 150px">
                <Option label='是'
                        value="1" />
                <Option label='否'
                        value="2" />
              </Select>
            </FormItem> -->
            <FormItem label="创建时间:">
              <DatePicker
                type="date"
                clearable
                size="small"
                style="width: 150px"
                placeholder="年/月/日"
                v-model="searchData.date[0]"
              ></DatePicker>
            </FormItem>
            <FormItem label="~">
              <DatePicker
                type="date"
                size="small"
                clearable
                style="width: 150px"
                placeholder="年/月/日"
                v-model="searchData.date[1]"
              ></DatePicker>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                size="small"
                @click="initData(searchData)"
                style="margin-right:10px;"
                >搜索</Button
              >
            </FormItem>
          </Form>
          <div class="content_right_topfrom_btn"></div>
        </div>
        <div class="content_right_content">
          <div class="content_right_content_table">
            <Table
              :columns="tableColumns"
              border
              :max-height="400"
              :loading="tableLoading"
              :data="tableData"
            >
              <template slot="setSlot" slot-scope="{ row, index }">
                <a style="margin:0 5px" @click="handleSet(2, row, index)"
                  >编辑</a
                >
                <a style="margin:0 5px" @click="handleSet(3, row, index)"
                  >查看</a
                >
                <a style="margin:0 5px" @click="handleSet(4, row, index)"
                  >删除</a
                >
              </template>
            </Table>
            <div class="content_right_content_page">
              <Page
                :page-size-opts="[10, 20, 30, 40, 100]"
                @on-page-size-change="changeSize"
                @on-change="changePage"
                :current="pageIndex"
                show-total
                show-elevator
                :total="total"
                show-sizer
                :page-size="pageSize"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "SippliersList",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      type: "",
      treeData: [
        {
          title: "客户分类",
          expand: true,
          sub: [],
          render: (h, { root, node, data }) => {
            return h(
              "span",
              {
                style: {
                  display: "inline-block",
                  width: "100%",
                },
              },
              [
                h("span", [
                  h("Icon", {
                    props: {
                      type: "ios-folder-outline",
                    },
                    style: {
                      marginRight: "8px",
                    },
                  }),
                  h("span", data.title),
                ]),
              ]
            );
          },
        },
      ],
      buttonProps: {
        type: "default",
        size: "small",
      },
      headers: { Authorization: localStorage.getItem("token") },
      overStandardList: [],
      tableColumns: [
        {
          title: "客户编码",
          key: "code",
          align: "center",
          tooltip: true,
          minWidth: 140,
        },
        {
          title: "客户名称",
          key: "title",
          align: "center",
          tooltip: true,
          minWidth: 140,
        },
        {
          title: "折扣率(%)",
          key: "fax",
          align: "center",
          tooltip: true,
          minWidth: 140,
        },
        {
          title: "专营业务员",
          key: "nickname",
          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: "plan_title",
          align: "center",
          tooltip: true,
          minWidth: 140,
          // render: (h, params) => {
          //   const { row } = params
          //   let text
          //   this.overStandardList.forEach(element => {
          //     (element.id == row.overdraft_plan_id) && (text = element.title)
          //   });
          //   return h('span', {}, text)
          // }
        },
        {
          title: "是否启用",
          key: "lock",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, row.lock == 1 ? "是" : "否");
          },
        },
        {
          title: "创建时间",
          key: "crt_time",
          align: "center",
          tooltip: true,
          minWidth: 140,
          render: (h, params) => {
            return h("span", {}, this.func.replaceDate(params.row.crt_time));
          },
        },
        // {
        //   title: '添加时间', key: 'crt_time', align: 'center', minWidth: 120,
        //   render: (h, params) => {
        //     const { row } = params
        //     return h('span', {}, this.func.replaceDate(row.crt_time))
        //   }
        // },
        {
          title: "操作",
          key: "code",
          align: "center",
          minWidth: 170,
          slot: "setSlot",
        },
      ],
      tableData: [],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      searchData: {
        title: "",
        code: "",
        service_id: "",
        lock: "",
        date: [],
        // start_time: '',
        // end_time: '',
      },
      suppliersTypeTitle: "",
      suppliersTypeId: "",
      userList: [],
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取超标方案
    this.axios({ method: "get", url: "/api/overdraft_list" }).then((res) => {
      this.overStandardList = res.data.data;
    });
    // 获取用户列表
    this.axios({ method: "get", url: "/api/employee_list" }).then((res) => {
      this.userList = res.data.data;
    });
    // 获取客户分类列表
    this.axios({
      method: "post",
      url: "/api/basic_custom_list",
    }).then((res) => {
      this.treeData[0].sub = res.data;
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData(this.searchData);
  },
  methods: {
    initData(row) {
      this.searchData.date[0]
        ? (this.searchData.start_time = this.func.replaceDateNoHMS(
            this.searchData.date[0]
          ))
        : "";
      this.searchData.date[1]
        ? (this.searchData.end_time = this.func.replaceDateNoHMS(
            this.searchData.date[1]
          ))
        : "";
      const subForm = {
        start_time: this.func.replaceDateNoHMS(this.searchData.date[0]) || "",
        end_time: this.func.replaceDateNoHMS(this.searchData.date[1]) || "",
        title: row.title,
        code: row.code,
        service_id: row.service_id,
      };
      this.tableLoading = true;
      this.axios({
        method: "get",
        url: "/api/custom_list",
        params: {
          ...subForm,
          page_index: this.pageIndex,
          page_size: this.pageSize,
        },
      })
        .then((res) => {
          this.tableLoading = false;
          this.total = res.data.total;
          this.tableData = res.data.data;
        })
        .catch((err) => {});
    },
    handleSet(type, row, index) {
      // 2编辑 3查看 4删除
      switch (type) {
        case 2:
        case 3:
          this.handleGoPage(type, row.id);
          break;
        case 4:
          this.$Modal.confirm({
            title: "确认删除？",
            content: "此操作无法恢复，请确认！",
            onOk: () => {
              this.axios({
                method: "post",
                url: "/api/custom_del",
                data: {
                  id: row.id,
                },
              })
                .then((res) => {
                  this.$Message.success(res.msg);
                  this.initData(this.searchData);
                })
                .catch((err) => {});
            },
            onCancel: () => {},
          });
          break;
      }
    },
    append(data) {
      const children = data.children || [];
      children.push({
        code: this.form.code,
        title: this.form.title,
        expand: true,
      });
      this.$set(data, "children", children);
    },
    remove(root, node, data) {
      if (node.children && node.children.length > 0) {
        this.$Message.error("有子集时不可删除");
      } else {
        const parentKey = root.find((el) => el === node).parent;
        const parent = root.find((el) => el.nodeKey === parentKey).node;
        const index = parent.children.indexOf(data);
        parent.children.splice(index, 1);
      }
    },
    handleModalOk() {
      this.append(this.treeData[0]);
    },
    handleTreeSelect(arr, row) {
      console.log("row :>> ", row);
      this.searchData.code = row.code;
      this.suppliersTypeTitle = row.title;
      this.suppliersTypeId = row.id;
      this.initData(this.searchData);
    },
    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 || "上传失败");
    },
    changeSize(e) {
      this.pageSize = e;
      this.initData(this.searchData);
    },
    changePage(e) {
      this.pageIndex = e;
      this.initData(this.searchData);
    },
    handleGoPage(type, id) {
      // if (type == 1 && this.suppliersTypeTitle == '') {
      //   this.$Message.warning('新增请先选择左侧客户分类！')
      // } else {
      this.$router.push({
        path: "/cms/BasicSettings/CustomerFiles/detail",
        query: {
          type,
          id,
        },
      });
      // }
    },
     async exportData(){
            const res = await this.axios('/api/custom_export')
           if(res.code == 200){
                let url = `${this.$store.state.ip}/api/storage/${res.data.file}`
                location.href = url
            }
        },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  .content_left {
    width: 15%;
    height: 60vh;
    border-right: 1px solid #515a6e;
  }
  .content_right {
    width: 83%;
    .content_right_topform {
      /deep/.ivu-form {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      /deep/.ivu-form-item {
        display: inline-block;
        width: 250px;
      }
      .content_right_topfrom_btn {
        display: flex;
        justify-content: flex-end;
      }
    }
    .content_right_content {
      border-top: 1px solid #f4f4f4;
      margin-top: 20px;
      padding-top: 20px;
      .content_right_content_btn {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
      }
      .content_right_content_table {
      }
      .content_right_content_page {
        display: flex;
        justify-content: center;
        padding-top: 20px;
      }
    }
  }
}
.demo-tree-render {
  width: 100%;
}
</style>