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

<template>
  <div>
    <Toptitle title="线条高度设置">
      <Button type="primary" @click="handleSet({ id: null }, 5)"
        >新增方案</Button
      >
    </Toptitle>
    <Row style="padding:10px 0">
      <Col span="6">
        <span>工艺属性：</span>
        <span>
          <Select
            filterable
            multiple
            clearable
            filter-by-label
            v-model="searchData.bp_id"
            :max-tag-count="2"
            @on-change="handleProcessSelected"
            style="width: 200px"
          >
            <Option
              v-for="(item, index) in basic_process_list"
              :key="index"
              :label="item.title"
              :value="item.id"
            ></Option>
          </Select>
        </span>
      </Col>
      <Col span="6">
        <span>分类：</span>
        <span>
          <Select
            filterable
            multiple
            clearable
            filter-by-label
            v-model="searchData.type_title"
            :max-tag-count="2"
            style="width: 200px"
          >
            <Option
              v-for="(item, index) in type_title_list"
              :key="index"
              :label="item"
              :value="item"
            ></Option>
          </Select>
        </span>
      </Col>
      <Col span="6">
        <span>部件名称：</span>
        <span>
          <Select
            filterable
            multiple
            clearable
            filter-by-label
            v-model="searchData.part_id"
            :max-tag-count="2"
            style="width: 200px"
          >
            <Option
              v-for="(item, index) in parts_list"
              :key="index"
              :label="item.title"
              :value="item.id"
            ></Option>
          </Select>
        </span>
      </Col>
      <Col span="2" offset="2">
        <Button @click="initData(searchData)" type="primary">搜索</Button>
      </Col>
    </Row>
    <div>
      <div style="height:600px">
      <Table :columns="tableColumns" border :max-height="600" :data="tableData" >
        <template slot="setSlot" slot-scope="{ row, index }">
          <div>
            <a style="margin:0 5px;" @click="handleSet(row, 1)">复制</a>
            <a style="margin:0 5px;" @click="handleSet(row, 2)">编辑</a>
            <a style="margin:0 5px;" @click="handleSet(row, 3)">查看</a>
            <a style="margin:0 5px;" @click="handleSet(row, 4)">删除</a>
          </div>
        </template>
      </Table></div>
      <div class="content_body_page">
        <Page
          :page-size-opts="[10, 20, 30, 40, 100]"
          @on-page-size-change="changeSize"
          @on-change="changePage"
          :current="searchData.page_index"
          show-total
          show-elevator
          :total="total"
          show-sizer
          :page-size="searchData.page_size"
        />
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "",
  components: {},
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      searchData: {
        bp_id: "",
        type_title: "",
        part_id: [],
        page_index: 1,
        page_size: 10,
      },
      urlSelectList: [],
      tableColumns: [
        { title: "序号", type: "index", align: "center", minWidth: 60 },
        { title: "工艺属性", align: "center", minWidth: 120, key: "bp_title" },
        { title: "分类", align: "center", minWidth: 120, key: "type_title" },
        { title: "部件名称", align: "center", minWidth: 120, key: "title" },
        { title: "操作", align: "center", minWidth: 180, slot: "setSlot" },
      ],
      tableData: [],
      total: 0,
      basic_process_list: [],
      type_title_list: [],
      parts_list: [],
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.axios.get("/api/basics_properties_index").then((res) => {
      this.basic_process_list = res.data.data;
    });
    this.axios.get("/api/parts_index").then((res) => {
      this.parts_list = res.data.data;
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData(this.searchData);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    initData(searchData) {
      this.axios
        .post("/api/process_part_list", { ...searchData })
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    handleProcessSelected(p_id) {
      p_id &&
        this.axios.post("/api/process_sub_title", { p_id }).then((res) => {
          this.type_title_list = res.data;
        });
    },
    changeSize(e) {
      this.searchData.pageSize = e;
      this.initData();
    },
    changePage(e) {
      this.searchData.pageIndex = e;
      this.initData();
    },
    handleSet(row, type) {
      // 1复制   2编辑   3查看   4删除   5新增
      switch (type) {
        case 1:
        case 2:
        case 3:
        case 5:
          this.$router.push({
            path: "/cms/BasicSettings/PartSettings/detail",
            query: {
              type,
              id: row.id,
            },
          });
          break;
        case 4:
          this.$Modal.confirm({
            title: "确认删除？",
            content: "此操作确认后不可恢复，请确认！",
            onOk: () => {
              this.axios({
                method: "post",
                url: "/api/process_part_del",
                data: {
                  id: row.id,
                },
              }).then((res) => {
                this.$Message.success(res.msg);
                this.initData(this.searchData);
              });
            },
            onCancel: () => {},
          });
          break;
      }
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.content_body_page {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
</style>