BST_bigScreen/src/views/ProcessMannage/index.vue

<template>
  <div>
    <FullPage
      :title="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">
         <Button type="success" ghost icon='ios-download-outline' style="margin-right:10px;" @click='exportData()'>导出</Button>
        <Button
          v-if="persimissionData['新增'] || persimissionData.all"
          @click="addItems"
          type="primary"
          ghost
          icon="md-add"
          >新增{{ title }}</Button
        >
      </div>
      <div slot="navButton"></div>
      <template slot="set" slot-scope="{ row }">
        <div class="table-set">
          <svg
            v-if="persimissionData['编辑'] || persimissionData.all"
            style="font-size:20px"
            color="#3764FF"
            @click="addItems(row)"
            class="icon icon-nav"
            aria-hidden="true"
          >
            <use xlink:href="#iconbianji"></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>

      <div>
        <Modal
          class-name="vertical-center-modal"
          :title="showType == 1 ? '新增' + title : '编辑' + title"
          v-model="showModal"
          :width="480"
          @on-visible-change="vivibleModal"
        >
          <Form :label-width="90">
            <FormItem label="ID：">
              <Input disabled placeholder="ID自动生成" v-model="classInfo.id" />
            </FormItem>
            <span v-if="repeatFlag" style="color:red;margin-left:8px;"
              >以下属性重复</span
            >
            <FormItem label="属性名称:">
              <div v-if="showType == 1">
                <div
                  class="item-attr"
                  v-for="(item, index) of attribute"
                  :key="index"
                >
                  <Input
                    :placeholder="'请输入' + title + '名称'"
                    v-model="item.title"
                  />
                  <Icon
                    @click="add(attribute)"
                    style="'margin:0 10px"
                    color="#32C800"
                    size="20"
                    type="ios-add-circle"
                  />
                  <Icon
                    v-if="attribute.length != 1"
                    @click="remove(attribute, index)"
                    style="'margin:0 10px"
                    color="#FF5E5C"
                    size="20"
                    type="md-remove-circle"
                  />
                  <!-- <Icon @click="addAttr(index)" style="'margin:0 10px" :color='index == attribute.length-1 ? "#32C800" : "#FF5E5C"' size='20' :type="index == attribute.length-1 ? 'ios-add-circle' : 'md-remove-circle'" /> -->
                </div>
              </div>

              <Input
                v-if="showType == 2"
                :placeholder="'请输入' + title + '名称'"
                v-model="classInfo.title"
              />
            </FormItem>
            <FormItem label="属性分类：">
              <Input
                placeholder="请输入属性分类"
                v-model="classInfo.type_title"
              />
            </FormItem>
          </Form>
          <div slot="footer" class="modal-footer">
            <Button @click="showModal = false">取消</Button>
            <Button type="primary" @click="postInfo">确定</Button>
          </div>
        </Modal>
      </div>
    </FullPage>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      list: [
        {
          title: `颜色名称`,
          name: "Input",
          value: "",
          serverName: "title",
          placeholder: `请输入颜色名称`,
        },
      ],
      tableColums: [
        {
          title: "序号",
          type: "index",
          align: "center",
          key: "id",
          resizable:true,
          width: 150,
        },
        { title: `颜色`, align: "center", key: "title" ,resizable:true, width: 600},
        { title: `分类`, align: "center", key: "type_title" ,resizable:true, width: 600},
        { title: "操作", align: "center", slot: "set", minWidth: 150 },
      ],
      tableData: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      showModal: false,
      showType: 1,
      classInfo: {},
      attribute: [{ title: "" }],
      title: "",
      id: null,
      proxyObj: {},
      loading: false,
      repeatFlag: false,
    };
  },
  mounted() {
    this.title = this.$route.query.title;
    if (this.$route.query.id) {
      this.proxyObj.id = this.$route.query.id;
      this.list[0].title = `${this.title}名称`;
      this.list[0].placeholder = `请输入${this.title}名称`;
      this.tableColums[1].title = this.title;
      this.getData(this.proxyObj);
    }
  },
  computed: {
    ...mapState(["persimissionData"]),
  },
  watch: {
    $route(to) {
      this.title = to.query.title;
      this.id = to.query.id;
      this.proxyObj.id = this.id;
      this.list[0].title = `${this.title}名称`;
      this.list[0].value = "";
      this.list[0].placeholder = `请输入${this.title}名称`;
      this.tableColums[1].title = this.title;
      this.proxyObj.title = "";
      this.getData(this.proxyObj);
      this.classInfo.id = this.id;
    },
  },
  methods: {
    init(row) {
      this.pageIndex = 1;
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize;
      this.proxyObj = row;
      this.proxyObj.id = this.$route.query.id;
      this.getData(this.proxyObj);
    },
    addItems(obj) {
      this.showModal = true;
      this.repeatFlag = false
      if (obj.id) {
        this.showType = 2;
        this.classInfo.id = obj.id;
        this.classInfo.type_title = obj.type_title;
        this.classInfo.title = obj.title;
      } else {
        //新增
        this.showType = 1;
      }
    },
    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);
    },
    vivibleModal(e) {
      // if (!e) {
      //   this.showType == 1 ? this.attribute = [{ title: '' }] : this.classInfo = {}
      //   this.repeatFlag = false
      //   this.getData(this.proxyObj)
      // }
    },
  exportData(){
    let url ='';
    if(this.$route.query.id==1){
      url = '/api/process_material_export';
    }
    if(this.$route.query.id==2){
      url = "/api/process_finish_export";
    }
    if(this.$route.query.id==3){
      url = "/api/process_ship_export";
    }
    this.axios.get(url,{params:{id:this.$route.query.id}}).then(res=>{
              if(res.code == 200){
                let url = `${this.$store.state.ip}/api/storage/${res.data.file}`
                location.href = url
            }
           })
        },
    postInfo() {
      let post_url, post_data;
      if (this.showType == 1) {
        post_url = "/api/properties_add";
        let result = [];
        this.attribute.map((v) => result.push(v.title));
        post_data = {
          id: this.$route.query.id,
          title: result.join(","),
          type_title:this.classInfo.type_title
        };
      } else {
        post_url = "/api/properties_edit";
        post_data = this.classInfo;
      }
      this.axios.post(post_url, post_data).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.showModal = false;
          this.getData(this.proxyObj);
          this.classInfo.id = "";
          this.classInfo.type_title = "";
          this.classInfo.title = "";
          this.attribute = [{ title: "" }];
        } else {
          if (Array.isArray(res.data)) {
            this.repeatFlag = true;
            let result = [];
            res.data.map((v) => {
              let obj = {};
              v ? (obj.title = v) : "";
              obj.title ? result.push(obj) : "";
            });
            this.attribute = result;
            this.getData(this.proxyObj);
          }
        }
      });
    },
    addAttr(n) {
      n == this.attribute.length - 1
        ? this.attribute.push({ title: "" })
        : this.attribute.splice(n, 1);
    },
    add(array) {
      array.push({ title: "" });
    },
    remove(array, n) {
      array.splice(n, 1);
    },
    getData(row) {
      this.loading = true;
      this.axios("/api/properties_index", { params: row }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    delItems(row) {
      this.confirmDelete({
        content: "确认删除么？",
        then: () => {
          this.axios
            .post("/api/properties_del", { id: row.id, state: 0 })
            .then((res) => {
              if (res.code == 200) {
                this.$Message.success(res.msg);
                this.getData(this.proxyObj);
              }
            });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-attr {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>