BST_bigScreen/src/views/ProcessRoute/edit.vue

<template>
  <div>
    <Toptitle :title="setTip">
      <Button @click="back" type="primary" ghost style="margin-right:10px;"
        >返回</Button
      >
      <Button v-if="type != 3" @click="handleSubmit('Info')">保存</Button>
    </Toptitle>

    <div class="page-edit">
      <Form inline ref="Info" :model="info" :rules="rules">
        <FormItem label="ID">
          <Input v-model="info.id" disabled placeholder="自动生成" />
        </FormItem>
        <FormItem label="部件名称" prop="parts_id">
          <Select
            :disabled="type == 3"
            filterable
            clearable
            v-model="info.parts_id"
            style="width:186px;"
          >
            <Option
              v-for="item of partsList"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            ></Option>
          </Select>
        </FormItem>

        <FormItem label="工艺组合名称" prop="title">
          <Input
            :disabled="type == 3"
            v-model="info.title"
            placeholder="请输入工艺组合名称"
          />
        </FormItem>
        <FormItem label="价格" prop="price">
          <Input
            :disabled="type == 3"
            type="number"
            v-model="info.price"
            placeholder="请输入价格"
          />
        </FormItem>
      </Form>
      <!-- <span v-for="_item in partsList" :key="_item.id">
        <span v-for="_id in info.parts_id" :key="_id">
          <span v-show="_item.id == _id">
            {{ _item.title }}
          </span>
        </span>
      </span> -->
      <div class="hierarchy" v-for="item of info.list" :key="item.name">
        <span>{{ item.name || item.title }}(多选)：</span>
        <div v-for="_item in item.cld" class="radio-g" :key="_item.type_title">
          <span
            :class="['box-us', _item.show ? 'box-us-foc' : '']"
            @click="setBoxChange(item, _item)"
            >{{ _item.type_title }}</span
          >
          <div
            :class="['radio-us', __item.show ? 'radio-us-foc' : '']"
            v-for="__item in _item.list"
            @click="setRadioChange(_item, __item)"
            :key="__item.id"
          >
            {{ __item.title }}
          </div>
        </div>
        <!-- <div class="radio-g">
          <div @click="setRadioChange(item,_item)"
               :class="['radio-us',_item.show ? 'radio-us-foc' : '']"
               v-for='_item of item.cld'
               :key="_item.id">{{_item.title}}</div>
        </div> -->
      </div>
      <div style="padding:10px 0;">
        <span>工艺路线：</span>
        <Button :disabled="type == 3" @click="editRouter()">{{
          type == 1 ? "选择工艺路线" : "选择工艺路线"
        }}</Button>
        {{ process_name }}
      </div>

      <Table border :columns="tableColumns" :data="tableData"></Table>
    </div>
    <Modal
      class-name="vertical-center-modal"
      v-model="show_add"
      :mask-closable="false"
      title="选择工艺路线"
    >
      <div class="modal_process_route">
        <div class="modal_process_route_top">
          <div>
            <span>工艺路线名称:</span>
            <Input
              :disabled="type == 3"
              v-model="tempProcessLine.title"
              style="width:120px"
              placeholder="请输入"
            ></Input>
          </div>
          <Button
            type="primary"
            @click="handleSearchProcessLine(tempProcessLine.title)"
            >搜索</Button
          >
        </div>
        <div class="modal_process_route_content">
          <Table
            border
            :columns="processLineColumns"
            :data="processLineTableData"
          >
            <template slot="processLineSet" slot-scope="{ row, index }">
              <a style="margin:0 5px" @click="handleProcessLineSet(row, index)"
                >选择</a
              >
            </template>
          </Table>
        </div>
      </div>
    </Modal>
    <Modal
      class-name="vertical-center-modal"
      width="80%"
      :mask-closable="false"
      v-model="show_add_detail"
      title="工艺路线详情"
    >
      <div class="modal_process_route_detail">
        <div>
          <span style="width: 100px">id: </span
          ><Input
            v-model="info.id"
            disabled
            placeholder="自动生成"
            style="width: 150px"
            size="small"
          />
        </div>
        <div>
          <span style="width: 100px">工艺路线名称: </span
          ><Input
            v-model="info.process_route_title"
            placeholder="请输入工艺路线名称"
            @on-change="handleProcessNameChange"
            size="small"
            style="width: 250px"
          />
        </div>
      </div>
      <div class="modal_content">
        <div class="modal_content_left">
          <span>已选：</span>
          <SlickList
            :distance="10"
            :lockToContainerEdges="true"
            axis="x,y,xy"
            lockAxis="xy"
            v-model="selectTags"
            class="SortableList"
            @input="getChangeLists"
          >
            <SlickItem
              style="z-index: 9999"
              v-for="(item, key) of selectTags"
              :key="key"
              class="SortableItem"
              :index="key"
            >
              <Tooltip>
                <div slot="content">
                  <p>工时：{{ item.time }}</p>
                  <p>工价：{{ item.wages }}</p>
                  <p>产能：{{ item.capacity }}</p>
                </div>
                <div class="tag-modal">
                  <div class="before">{{ key + 1 }}</div>
                  <Tag
                    @on-close="closeTag(key, selectTags, item)"
                    color="primary"
                    type="border"
                    closable
                    >{{ item.title }}</Tag
                  >
                </div>
              </Tooltip>
            </SlickItem>
          </SlickList>
        </div>
        <div class="modal_content_right">
          <div v-for="(item, index) of info.bps" :key="index">
            <div v-if="item.cld && item.cld.length > 0">
              <span style="font-weight:bold">{{ item.title }}</span>
              <div
                style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
              >
                <div
                  v-for="(_item, _index) in item.cld"
                  :key="_index"
                  :style="
                    _item.p_id
                      ? [{ 'margin-left': '10px' }]
                      : [{ 'margin-left': '10px' }, { width: '100%' }]
                  "
                >
                  <div v-if="_item.cld && _item.cld.length > 0">
                    <div>
                      <div style="font-weight:bold;width:100%">
                        {{ _item.title }}:
                      </div>
                      <div
                        style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
                      >
                        <div
                          v-for="(__item, __index) in _item.cld"
                          :key="__index"
                          :style="
                            __item.p_id
                              ? [{ 'margin-left': '10px' }]
                              : [{ 'margin-left': '10px' }, { width: '100%' }]
                          "
                        >
                          <div v-if="__item.cld && __item.cld.length > 0">
                            <span style="font-weight:bold"
                              >{{ __item.title }}:</span
                            >
                            <div
                              style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
                            >
                              <Tooltip
                                v-for="(___item, ___index) of __item.cld"
                                :key="___index"
                              >
                                <div slot="content">
                                  <p>工时：{{ ___item.time }}</p>
                                  <p>工价：{{ ___item.wages }}</p>
                                  <p>产能：{{ ___item.capacity }}</p>
                                </div>
                                <Checkbox
                                  @on-change="
                                    changeCheck($event, ___item, selectTags)
                                  "
                                  v-model="___item.show"
                                  style="padding: 0px 5px"
                                  >{{ ___item.title }}</Checkbox
                                >
                              </Tooltip>
                            </div>
                          </div>
                          <div v-else>
                            <Tooltip v-if="__item.p_id">
                              <div slot="content">
                                <p>工时：{{ __item.time }}</p>
                                <p>工价：{{ __item.wages }}</p>
                                <p>产能：{{ __item.capacity }}</p>
                              </div>
                              <Checkbox
                                @on-change="
                                  changeCheck($event, __item, selectTags)
                                "
                                v-model="__item.show"
                                style="padding: 0px 5px"
                                >{{ __item.title }}</Checkbox
                              >
                            </Tooltip>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <Tooltip v-if="_item.p_id">
                      <div slot="content">
                        <p>工时：{{ _item.time }}</p>
                        <p>工价：{{ _item.wages }}</p>
                        <p>产能：{{ _item.capacity }}</p>
                      </div>
                      <Checkbox
                        @on-change="changeCheck($event, _item, selectTags)"
                        v-model="_item.show"
                        style="padding: 0px 5px"
                        >{{ _item.title }}</Checkbox
                      >
                    </Tooltip>
                    <!-- <span v-else>{{ _item.title }}</span> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- <div v-else>{{ item.title }}</div> -->
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          @click="
            show_add_detail = false;
            show_add = true;
          "
          type="primary"
          ghost
          >取消</Button
        >
        <Button @click="saveTableData()" type="primary">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
  data() {
    return {
      tempProcessLine: {
        title: "",
      },
      processLineColumns: [
        { title: "序号", type: "index", align: "center", key: "" },
        // { title: 'ID', align: 'center', key: 'id' },
        { title: "工艺路线名称", align: "center", key: "title" },
        { title: "操作", align: "center", key: "id", slot: "processLineSet" },
      ],
      processLineTableData: [],
      type: 1,
      id: null,
      partsList: [],
      show_add: false,
      show_add_detail: false,
      selectTags: [], //已选列表
      info: {
        title: "",
        price: "",
        parts_id: "",
        id: null,
        properties: [], //工序号
        procedure: [], //工艺属性id
        list: [],
        bps: [],
      },
      rules: {
        title: [{ required: true, message: " ", trigger: "blur" }],
        parts_id: [{ required: true, message: " " }],
        price: [{ required: true, message: " ", trigger: "blur" }],
      },
      tableColumns: [
        { title: "序号", type: "index", align: "center", key: "" },
        // { title: 'ID', align: 'center', key: 'id' },
        { title: "工序名称", align: "center", key: "title" },
        { title: "工时", align: "center", key: "time" },
        { title: "工价", align: "center", key: "wages" },
        { title: "产能", align: "center", key: "capacity" },
      ],
      tableData: [],
      processRouteId: "",
      processRouteName: "",
      process_name: "",
      isNewProcess: false,
      temp_info_bps: [],
    };
  },
  computed: {
    setTip() {
      const { type } = this.$route.query;
      const inner =
        type == 1
          ? "新增工艺"
          : type == 2
          ? "编辑工艺"
          : type == 3
          ? "查看工艺"
          : "拷贝工艺";
      return inner;
    },
  },
  mounted() {
    this.type = this.$route.query.type;
    this.id = this.$route.query.id;
    if (this.id) {
      this.getData(this.id);
    }
    this.axios("/api/bp_list").then((res) => {
      this.info.bps = res.data;
      this.temp_info_bps = res.data;
    });
    if (this.type == 1) {
      this.axios("/api/bpp_list_new").then((res) => {
        res.data.map((v) => {
          if (v.select) {
            v.cld.map((z) => {
              v.select.map((k) => {
                z.show = k == z.id ? true : false;
              });
            });
          } else {
            v.cld.map((v) => (v.show = false));
          }
        });
        this.info.list = res.data;
      });
    }
    this.getParts();
  },
  methods: {
    handleProcessLineSet(row, index) {
      this.info.id = row.id;
      this.info.process_route_title = row.title;
      this.info.procedure_id = row.procedure_id;
      this.isNewProcess = false;
      this.selectTags = [];
      const arr = this.info.procedure_id
        ? this.info.procedure_id.split(",")
        : [];
      console.log("this.info.bps :>> ", this.info.bps);
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        this.info.bps.map((lv1) => {
          lv1.cld &&
            lv1.cld.length > 0 &&
            lv1.cld.map((lv2) => {
              if (lv2.id == element) {
                lv2.show = true;
                lv2.p_id && this.selectTags.push(lv2);
              }
              lv2.cld &&
                lv2.cld.length > 0 &&
                lv2.cld.map((lv3) => {
                  if (lv3.id == element) {
                    lv3.show = true;
                    lv3.p_id && this.selectTags.push(lv3);
                  }
                  lv3.cld &&
                    lv3.cld.length > 0 &&
                    lv3.cld.map((lv4) => {
                      if (lv4.id == element) {
                        lv4.show = true;
                        lv4.p_id && this.selectTags.push(lv4);
                      }
                    });
                });
            });
        });
      }
      this.show_add_detail = true;
      this.show_add = false;
    },
    handleProcessNameChange(val) {
      this.process_name = val;
      this.isNewProcess = true;
    },
    handleSearchProcessLine(title) {
      this.axios({
        method: "get",
        url: "/api/technological_route",
        params: {
          title,
        },
      }).then((res) => {
        this.processLineTableData = res.data.data;
      });
    },
    back() {
      this.$router.go(-1);
    },
    getChangeLists(e) {},
    postData() {
      const { type } = this.$route.query;
      this.info.op = type == 1 || type == 4 ? "add" : "edit";
      let data = JSON.parse(JSON.stringify(this.info));
      data.technological_route_id = data.id;
      type == 4 ? (data.id = "") : "";
      let properties = [],
        procedure = [];
      data.list.forEach((element) => {
        element.cld.forEach((elem) => {
          elem.list.forEach((el) => {
            if (el.show) {
              properties.push(el.id);
            }
          });
        });
      });
      this.selectTags.map((v) => {
        procedure.push(v.id);
      });
      delete data.list;
      delete data.bps;
      this.type == 1 ? delete data.id : "";
      data.properties = properties;
      data.procedure = procedure.join(",");
      this.axios.post("/api/process_route_save", data).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          setTimeout(() => {
            this.back();
          }, 500);
        }
      });
    },
    getData(row) {
      this.axios("/api/process_route_detail", { params: { id: row } }).then(
        (res) => {
          this.info = res.data;
          this.info.bps = this.temp_info_bps;
          this.selectTags = res.data.produce_list;
          const selectTagsId = this.selectTags.map((item) => item.id);
          this.info.bps.forEach((v) => {
            v.cld &&
              v.cld.length > 0 &&
              v.cld.forEach((z) => {
                z.show = selectTagsId.includes(z.id);
                z.cld &&
                  z.cld.length > 0 &&
                  z.cld.forEach((elem) => {
                    elem.show = selectTagsId.includes(elem.id);
                    elem.cld &&
                      elem.cld.length > 0 &&
                      elem.cld.forEach((ele) => {
                        ele.show = selectTagsId.includes(ele.id);
                        ele.cld &&
                          ele.cld.length > 0 &&
                          ele.cld.forEach((el) => {
                            el.show = selectTagsId.includes(el.id);
                          });
                      });
                  });
              });
          });
          this.process_name = res.data.technological_route_title;
          this.tableData = JSON.parse(JSON.stringify(this.selectTags));
        }
      );
    },
    getParts() {
      this.axios("/api/parts_index").then((res) => {
        this.partsList = res.data.data;
      });
    },
    editRouter() {
      this.show_add = true;
      this.handleSearchProcessLine(this.tempProcessLine.title);
    },
    changeCheck(e, item, selectArray) {
      this.isNewProcess = true;
      //复选框选中与非选中同时同步tag标签跟随操作
      item.show = e;
      if (e) {
        selectArray.push(item);
      } else {
        let id = item.id;
        let id_index = selectArray.findIndex((v) => v.id == id);
        selectArray.splice(id_index, 1);
      }
    },
    // closeTag(key, arr, row) {
    //   //取消tag标签展示操作并同步下方的复选框ui同步
    //   arr.splice(key, 1);
    //   console.log(this.info);
    //   this.info.bps.map((v) => {
    //     v.cld.map((p) => {
    //       p.id == row.id ? (p.show = false) : "";
    //       console.log(p);
    //     });
    //   });
    // },
    closeTag(key, arr, row) {
      //取消tag标签展示操作并同步下方的复选框ui同步
      for (const key in this.info.bps) {
        const element = this.info.bps[key];
        element.cld.map((p) => {
          p.id == row.id ? (p.show = false) : "";
          p.cld &&
            p.cld.length > 0 &&
            p.cld.map((q) => {
              q.id == row.id ? (q.show = false) : "";
              q.cld &&
                q.cld.length > 0 &&
                q.cld.map((r) => {
                  r.id == row.id ? (r.show = false) : "";
                  r.cld &&
                    r.cld.length > 0 &&
                    r.cld.map((s) => {
                      s.id == row.id ? (s.show = false) : "";
                    });
                });
            });
        });
      }
      arr.splice(key, 1);
    },
    saveTableData() {
      if (this.isNewProcess) {
        let temparr = [];
        this.selectTags.forEach((el) => {
          temparr.push(el.id);
        });
        this.axios({
          method: "post",
          url: "/api/technological_route_edit",
          data: {
            id: "",
            title: this.info.process_route_title,
            procedure_id: temparr.join(","),
          },
        }).then((res) => {
          if (res.code == 200) {
            // this.$Message.success(res.msg);
            this.tableData = JSON.parse(JSON.stringify(this.selectTags));
            this.process_name = this.info.process_route_title;
            this.show_add_detail = false;
          }
        });
      } else {
        this.tableData = JSON.parse(JSON.stringify(this.selectTags));
        this.process_name = this.info.process_route_title;
        this.show_add_detail = false;
      }
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.postData();
        }
      });
    },
    changeRadio(e) {},
    setBoxChange(parent, child) {
      const { type } = this.$route.query;
      if (type == 3) {
        return;
      }
      child.show = !child.show;
      child.list.forEach((element) => {
        element.show = child.show;
      });
    },
    setRadioChange(parent, child) {
      const { type } = this.$route.query;
      if (type == 3) {
        return;
      }
      child.show = !child.show;
      let flag = true;
      parent.list.forEach((element) => {
        if (!element.show) {
          flag = false;
        }
      });
      parent.show = flag;
      // parent.cld.map(v=>v.show = false)
      // if(parent.select == child.id){
      //     child.show = false;
      //     parent.select = '';
      // }else{
      //     parent.select = child.id;
      //     child.show = true;
      // }
      this.$forceUpdate();
    },
  },
  components: { SlickList, SlickItem },
};
</script>

<style lang="scss" scoped>
.edit-table-log {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  .footer-log {
    color: #666666;
  }
}
.hierarchy {
  .radio-g {
    padding: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .radio-us {
      background: #f4f5f7;
      padding: 5px 20px;
      margin: 5px;
      margin-right: 18px;
      color: #999999;
      border-radius: 15px;
      border: 1px solid #dedede;
      cursor: pointer;
    }
    .radio-us-foc {
      color: #3764ff;
      background: #fff;
      border: 1px solid #3764ff;
    }
    .box-us {
      background: #f4f5f7;
      padding: 5px 20px;
      margin: 5px;
      margin-right: 18px;
      color: #999999;
      border-radius: 5px;
      border: 1px solid #dedede;
      cursor: pointer;
    }
    .box-us-foc {
      color: #3764ff;
      background: #fff;
      border: 1px solid #3764ff;
    }
  }
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal {
    top: 0;
  }
}
.modal-tags {
  display: flex;
  align-items: center;
}
.pro-select {
  display: flex;
  padding: 10px 0;
  align-items: center;
}
// .SortableList {
//   display: flex;
//   flex-wrap: wrap;
//   overflow: hidden;
// }
.tag-modal {
  display: flex;
  align-items: center;
  .before {
    width: 20px;
    background: #3764ff;
    height: 24px;
    border-radius: 5px 0 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
}
/deep/.ivu-modal-body {
  height: 700px;
  overflow: auto;
}
</style>

<style lang="scss">
.modal_process_route {
  .modal_process_route_top {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }
}
.ivu-tooltip-popper {
  z-index: 999999 !important;
}
.modal_content {
  display: flex;
  justify-content: space-around;
  height: 100%;
  .modal_content_left {
    max-width: 40%;
    min-width: 30%;
    border-right: 1px solid #d8d8d8;
  }
  .modal_content_right {
    width: 60%;
    max-height: 600px;
    padding-left: 10px;
    overflow: hidden;
    overflow-y: auto;
    font-size: 18px;
  }
}
.modal_process_route_detail {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 5px 0;
}
</style>