jf-frock/src/views/ProcessRoute/index.vue

<template>
  <div>
    <FullPage
      title="工艺组合"
      :list="list"
      @init="init"
      :loading="loading"
      @searchData="init"
      @changePage="changePage"
      @changeSize="changeSize"
      :tableColums="tableColums"
      :tableData="tableData"
      :pageIndex="pageIndex"
      :total="total"
    >
      <div slot="titleButton" style="display:flex;">
        <Upload
          v-if="persimissionData['批量导入'] || persimissionData.all"
          name="your_file"
          :show-upload-list="false"
          :headers="headers"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :action="$store.state.ip + '/api/process_route_index_import'"
        >
          <Button type="success" ghost icon="md-exit" style="margin-right:10px;"
            >批量导入</Button
          >
        </Upload>
        <Button
          v-if="persimissionData['批量导出'] || persimissionData.all"
          @click="exportData"
          type="warning"
          ghost
          icon="md-return-left"
          style="margin-right:10px;"
          >批量导出</Button
        >
        <Button
          v-if="persimissionData['新增工艺'] || persimissionData.all"
          @click="goPage(1)"
          type="primary"
          ghost
          icon="md-add"
          >新增工艺组合</Button
        >
      </div>
      <div slot="navButton">
        <Button @click="handleSortSet" type="primary">排序设置</Button>
      </div>

      <template slot="set" slot-scope="{ row }">
        <div class="table-set">
          <svg
            style="font-size:20px"
            color="#3764FF"
            @click="goPage(4, row)"
            class="icon icon-nav"
            aria-hidden="true"
          >
            <use xlink:href="#iconcopy-01"></use>
          </svg>
          <svg
            v-if="persimissionData['编辑'] || persimissionData.all"
            style="font-size:20px"
            color="#3764FF"
            @click="goPage(2, row)"
            class="icon icon-nav"
            aria-hidden="true"
          >
            <use xlink:href="#iconbianji"></use>
          </svg>
          <svg
            style="font-size:20px"
            color="green"
            @click="goPage(3, row)"
            class="icon icon-nav"
            aria-hidden="true"
          >
            <use xlink:href="#iconxiangqing"></use>
          </svg>
          <svg
            v-if="persimissionData['删除'] || persimissionData.all"
            @click="delItems(row)"
            class="icon icon-nav"
            style="font-size:20px"
            color="red"
            aria-hidden="true"
          >
            <use xlink:href="#iconshanchu"></use>
          </svg>
        </div>
      </template>
    </FullPage>
    <Modal v-model="showSortModal" title="排序设置" width="650">
      <div>
        <Form
          :label-width="80"
          inline
          v-for="(_item, _index) in sortList"
          :key="_index"
        >
          <FormItem :label="'关键字' + (_index + 1)">
            <Select filterable clearable transfer v-model="_item.value">
              <Option
                v-for="item of headerList"
                :key="item.key"
                :label="item.title"
                :disabled="
                  item.title == '操作' ||
                    item.title == '已收款' ||
                    item.title == '未收款'
                "
                :value="item.key"
              ></Option>
            </Select>
          </FormItem>
          <FormItem label="排序方式">
            <Select
              style="width:150px"
              filterable
              clearable
              transfer
              v-model="_item.sort"
            >
              <Option label="升序" :value="1"></Option>
              <Option label="降序" :value="2"></Option>
            </Select>
          </FormItem>
          <FormItem :label-width="10">
            <Icon
              @click="
                handleSortListChange(sortList, 0, _index, {
                  sort: null,
                  level: sortList.length + 1,
                  value: '',
                })
              "
              v-show="sortList.length < 2"
              style="'margin:0 10px"
              size="20"
              type="ios-add"
            />
            <Icon
              @click="handleSortListChange(sortList, 1, _index, null)"
              v-show="sortList.length > 1"
              style="'margin:0 10px"
              size="20"
              type="ios-remove"
            />
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button
          @click="showSortModal = false"
          type="primary"
          style="margin-right: 10px"
          >取消</Button
        >
        <Button
          @click="handleConfirmSort"
          type="primary"
          style="margin-right: 10px"
          >确定</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      list: [
        {
          title: "工艺组合名称",
          name: "Input",
          value: "",
          serverName: "title",
          placeholder: "请输入工艺组合名称",
        },
      ],
      tableColums: [],
      tableData: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      proxyObj: {},
      loading: false,
      headers: { Authorization: localStorage.getItem("token") },
      showSortModal: false,
      sortList: [{ sort: null, level: 1, value: "" }],
      headerList: [
        { key: "part_title", title: "部件名称" },
        { key: "process_title", title: "工艺组合名称" },
      ],
    };
  },
  computed: {
    ...mapState(["persimissionData"]),
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/cms/processroute/edit") {
      this.$route.meta.keepAlive = true;
    } else {
      this.$route.meta.keepAlive = false;
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getData(vm.proxyObj);
    });
  },
  methods: {
    init(row) {
      this.pageIndex = 1;
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize;
      this.proxyObj = row;
      this.getData(row);
    },
    getData(row) {
      this.loading = true;
      this.axios("/api/process_route_index", { params: row }).then((res) => {
        this.loading = false;
        res.data.top.map((v, i) => {
          if (v.key == "颜色") {
            v.hover = 1;
          }
          if (i == 0) {
            v.fixed = "left";
            v.width = "100";
          } else {
            if (i == res.data.top.length - 1) {
              v.fixed = "right";
              v.width = "150";
            } else {
              v.minWidth = 150;
            }
          }

          if (v.hover == 1) {
            v.render = function(h, params) {
              const { row } = params;

              return h(
                "Tooltip",
                {
                  props: {
                    content: row[v.key],
                    placement: "right",
                    maxWidth: "200",
                    style: {
                      zIndex: 10000,
                    },
                  },
                },
                [
                  h(
                    "div",
                    {
                      props: {},
                      style: {
                        width: "100px",
                        overflow: "hidden",
                        whiteSpace: "nowrap",
                        textOverflow: "ellipsis",
                      },
                    },
                    row[v.key]
                  ),
                ]
              );
            };
          }
        });
        this.tableColums = res.data.top;
        this.tableData = res.data.detail;
        this.total = res.data.total;
      });
    },
    changePage(e) {
      this.pageIndex = e;
      this.proxyObj.page_index = this.pageIndex;
      this.getData(this.proxyObj);
    },
    changeSize(e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.pageSize;
      this.getData(this.proxyObj);
    },
    goPage(n, row) {
      let id = row ? row.id : "";
      this.$router.push({
        path: "/cms/processroute/edit",
        query: {
          type: n,
          id: id,
        },
      });
    },
    handleSortSet() {
      this.showSortModal = true;
    },
    handleSortListChange(arr, type, index, obj) {
      if (obj) {
        arr.splice(index + 1, type, obj);
      } else {
        arr.splice(index, type);
      }
    },
    handleConfirmSort() {
      if (
        this.sortList.length > 1 ||
        (this.sortList.length == 1 && this.sortList[0].sort)
      ) {
        this.loading = true;
        this.axios("/api/order_list_new", {
          params: { ...this.proxyObj, sortList: this.sortList },
        }).then((res) => {
          if (res.code == 200) {
            this.loading = false;
            if (!res.data.data) {
              return this.$Message.error("列表数据返回格式不正确");
            }
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.showSortModal = false;
            // this.tableModalTableData =
            //   res.data.tableSet.tableSet.length < 1
            //     ? this.tableModalTableData
            //     : res.data.tableSet.tableSet;
            // this.formModalTableData =
            //   res.data.tableSet.formSet.length < 1
            //     ? this.formModalTableData
            //     : res.data.tableSet.formSet;
            // this.sub_formModalTableData = JSON.parse(
            //   JSON.stringify(this.formModalTableData)
            // );
            // this.sub_tableModalTableData = JSON.parse(
            //   JSON.stringify(this.tableModalTableData)
            // );
          }
        });
      } else {
        this.showSortModal = false;
      }
    },
    delItems(row) {
      this.confirmDelete({
        content: "确认删除么？",
        then: () => {
          this.axios
            .post("/api/process_route_del", { id: row.id, state: 0 })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.getData(this.proxyObj);
              }
            });
        },
      });
    },
    async exportData() {
      const res = await this.axios("/api/process_route_index_export", {
        params: { ...this.proxyObj, page: 0 },
      });
      if (res.code == 200) {
        let url = `${this.$store.state.ip}/api/storage/${res.data.file}`;
        location.href = url;
      }
    },
    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 || "上传失败");
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  overflow: visible;
}
</style>