kd-aiot-frontend-mes/src/views/produce/components/outsourcing/index.vue

<template>
  <div class="index_box">
    <div class="c_header_title">
      <!-- <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="委外记录" name="1"></el-tab-pane>
        <el-tab-pane label="请托记录" name="2"></el-tab-pane>
      </el-tabs> -->
      <div class="c_title">委外记录</div>
    </div>
    <div style="overflow: auto">
      <el-form
        label-width="100px"
        :rules="rules"
        ref="form"
        :model="attributeData"
      >
        <el-form-item label="委外名称:" prop="name">
          <el-input
            placeholder=""
            v-model="attributeData.name"
            style="width: 260px"
          ></el-input>
        </el-form-item>

        <el-form-item label="委外类型:" prop="type">
          <el-select
            v-model="attributeData.type"
            placeholder="请选择"
            style="width: 260px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="委外数量:" prop="formedNumLast">
          <el-input
            placeholder="请输入委外数量"
            type="number"
            v-model="attributeData.formedNumLast"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item label="委外工序:" prop="taskIdes">
          <el-select
            v-model="attributeData.taskIdes"
            placeholder="请选择"
            style="width: 260px"
            @change="changeTaskId"
            multiple
          >
            <el-option
              v-for="item in newStepsList"
              :key="item.taskId"
              :label="item.taskTypeName"
              :value="item.taskId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="委外场景:" prop="sceneText">
          <el-input
            placeholder=""
            v-model="attributeData.sceneText"
            disabled
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <!-- v-if="attributeData.isFirstTask != 1" -->
        <el-form-item label="直接入库:" borderBottom prop="warehouseId">
          <div style="display: flex">
            <div
              style="font-size: 15px"
              v-if="attributeData.clientEnvironmentId == 2"
              >是</div
            >
            <!-- <el-checkbox-group v-model="isInWarehouse" size="15px" v-if="attributeData.clientEnvironmentId != 2 ">
                            <el-checkbox labelSize="15px" iconSize="10px" activeColor="#157A2C" name="true"
                                label="是"></el-checkbox>
                        </el-checkbox-group> -->
            <!-- <el-checkbox labelSize="15px" iconSize="10px" v-model="isInWarehouse" activeColor="#157A2C" name="true"
                                label="是" v-if="attributeData.clientEnvironmentId != 2 "></el-checkbox> -->
            <el-select
              v-if="attributeData.clientEnvironmentId == 2 || isInWarehouse"
              v-model="attributeData.warehouseId"
              placeholder="请选择"
              style="width: 260px"
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item label="委外单位:">
          <el-select
            v-model="attributeData.supplierId"
            placeholder="请选择"
            style="width: 260px"
            @change="changeTaskId"
            filterable
          >
            <el-option
              v-for="(item, index) in gysList"
              :key="item.id + index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="工艺路线:"
          borderBottom
          style="font-size: 15px"
          prop="produceRoutingId"
          v-if="
            attributeData.clientEnvironmentId != 2 &&
            attributeData.isFirstTask != 1 &&
            isInWarehouse &&
            isInWarehouse.length == 0
          "
        >
          <el-select
            v-model="attributeData.produceRoutingId"
            placeholder="请选择"
            style="width: 260px"
          >
            <el-option
              v-for="item in produceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="交付交期:" prop="requireDeliveryTime">
          <el-date-picker
            v-model="attributeData.requireDeliveryTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 260px"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="生产备注:">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="textarea2"
            style="width: 260px"
          >
          </el-input>
        </el-form-item>

        <div class="btn-box">
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button type="primary" @click="cancel">取消</el-button>
        </div>
      </el-form>
    </div>

    <div v-if="activeName == '2'">
      <el-form
        label-width="100px"
        :rules="rules"
        ref="form"
        :model="attributeData"
      >
        <el-form-item label="请托名称:" prop="name">
          <el-input
            placeholder=""
            v-model="attributeData.name"
            style="width: 260px"
          ></el-input>
        </el-form-item>

        <el-form-item label="请托类型:" prop="type">
          <el-select
            v-model="attributeData.type"
            placeholder="请选择"
            style="width: 260px"
          >
            <el-option
              v-for="item in pleaseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请托数量:" prop="formedNumLast">
          <el-input
            placeholder="请输入请托数量"
            type="number"
            v-model="attributeData.formedNumLast"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item label="请托到:" prop="taskIdes">
          <el-select
            v-model="attributeData.taskIdes"
            placeholder="请选择"
            style="width: 260px"
            @change="changeTaskId"
            multiple
          >
            <el-option
              v-for="item in newStepsList"
              :key="item.taskId"
              :label="item.taskTypeName"
              :value="item.taskId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请托场景:" prop="sceneText">
          <el-input
            placeholder=""
            v-model="attributeData.sceneText"
            disabled
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <!-- v-if="attributeData.isFirstTask != 1" -->
        <el-form-item label="直接入库:" borderBottom prop="warehouseId">
          <div style="display: flex">
            <div
              style="font-size: 15px"
              v-if="attributeData.clientEnvironmentId == 2"
              >是</div
            >
            <!-- <el-checkbox-group v-model="isInWarehouse" size="15px" v-if="attributeData.clientEnvironmentId != 2 ">
                            <el-checkbox labelSize="15px" iconSize="10px" activeColor="#157A2C" name="true"
                                label="是"></el-checkbox>
                        </el-checkbox-group> -->
            <!-- <el-checkbox labelSize="15px" iconSize="10px" v-model="isInWarehouse" activeColor="#157A2C" name="true"
                                label="是" v-if="attributeData.clientEnvironmentId != 2 "></el-checkbox> -->
            <el-select
              v-if="attributeData.clientEnvironmentId == 2 || isInWarehouse"
              v-model="attributeData.warehouseId"
              placeholder="请选择"
              style="width: 260px"
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item label="请托单位:">
          <el-select
            v-model="attributeData.factoriesId"
            placeholder="请选择"
            style="width: 260px"
            @change="changeTaskId"
          >
            <el-option
              v-for="item in factoryList"
              :key="item.factoryId"
              :label="item.factoryName"
              :value="item.factoryId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="工艺路线:"
          borderBottom
          style="font-size: 15px"
          prop="produceRoutingId"
          v-if="
            attributeData.clientEnvironmentId != 2 &&
            attributeData.isFirstTask != 1 &&
            isInWarehouse &&
            isInWarehouse.length == 0
          "
        >
          <el-select
            v-model="attributeData.produceRoutingId"
            placeholder="请选择"
            style="width: 260px"
          >
            <el-option
              v-for="item in produceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="交付交期:" prop="requireDeliveryTime">
          <el-date-picker
            v-model="attributeData.requireDeliveryTime"
            value-format="yyyy-MM-dd"
            style="width: 260px"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="生产备注:">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="textarea2"
            style="width: 260px"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div class="btn-box">
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { getWarehouseList, producerouting } from '@/api/produce/index.js';
  import { contactList } from '@/api/produce/bom.js';
  import { getFactoryarea } from '@/api/aps';
  export default {
    components: {},
    data() {
      return {
        attributeData: {
          name: '',
          type: '', //类型
          sceneText: '', //场景
          formedNumLast: '', //数据
          taskIds: '', //委外到
          isFirstTask: '',
          clientEnvironmentId: 1, //直接入库
          requireDeliveryTime: '', //计划交期
          warehouseId: '', //仓库id
          produceRoutingId: '', //工艺路线id
          supplierId: '', //供应商id
          supplierName: '',
          taskIdes: [],
          factoriesId: '',
          factoriesName: ''
        },
        isInWarehouse: true,
        produceList: [],
        warehouseList: [],
        newStepsList: [],
        taskIds: '',
        typeList: [
          {
            id: 4,
            name: '带料生产委外'
          },
          {
            id: 5,
            name: '不带料生产委外'
          }
        ],
        pleaseList: [
          {
            id: 4,
            name: '带料生产请托'
          },
          {
            id: 5,
            name: '不带料生产请托'
          }
        ],
        rules: {
          name: [
            { required: true, message: '请输入委外名称', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择委外类型', trigger: 'blur' }
          ],
          formedNumLast: [
            { required: true, message: '请输入委外数量', trigger: 'blur' }
          ],
          taskIdes: [
            { required: true, message: '请选择委外工序', trigger: 'blur' }
          ],
          sceneText: [
            { required: true, message: '请选择委外场景', trigger: 'blur' }
          ],
          warehouseId: [{ required: true, message: '请选择', trigger: 'blur' }],
          requireDeliveryTime: [
            { required: true, message: '请选择计划交期时间', trigger: 'blur' }
          ]
        },

        loading: false,
        operationType: null,
        workListIds: [],
        activeName: '1',
        textarea2: '',
        gysList: [],
        factoryList: [],
        clientEnvironmentId: this.$store.state.user.info.clientEnvironmentId
      };
    },
    props: {
      outsourceFormVal: {
        type: Object,
        default: () => ({})
      },
      taskName: {
        type: String,
        default: ''
      }
    },

    watch: {
      outsourceFormVal: {
        handler(val) {
          console.log(val, 'outsourceForm');
          Object.assign(this.attributeData, val);

          // console.log(this.attributeData.newStepsList, 'attributeData');

          // this.newStepsList = this.attributeData.newStepsList.filter(
          //   (item) => item.type != 2 && item.type != 3 && item.type != 6
          // );

          if (this.clientEnvironmentId == 3) {
            if (
              this.attributeData.newStepsList &&
              this.attributeData.newStepsList.length != 0
            ) {
              this.newStepsList = this.attributeData.newStepsList.filter(
                (item) => item.type != 6
              );
            }
          } else {
            this.newStepsList = this.attributeData.newStepsList;
          }

          this.getWarehouseFn();
          this.produceFn();
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      taskObj() {
        return this.$store.state.user.taskObj;
      }
    },

    mounted() {
      this.getContactList();
      this.getFactoryList();
      // if (this.activeName == '1') {
      //   // this.attributeData.name = this.outsourceFormVal.name + '委托';
      //   this.$set(this.outsourceFormVal, 'name', this.taskName + '委托');
      // } else if (this.activeName == '2') {
      //   // this.attributeData.name = this.outsourceFormVal.name + '请托';
      //   this.$set(this.outsourceFormVal, 'name', this.taskName + '请托');
      // }
    },

    methods: {
      // 工艺路线
      produceFn() {
        let param = {
          pageNum: 1,
          size: -1,
          routeType: 2
        };
        producerouting(param).then((res) => {
          this.produceList = res.list;
        });
      },

      async getFactoryList() {
        let par = {
          type: 1,
          size: 9999
        };
        await getFactoryarea(par).then((res) => {
          console.log(res, '工厂数据');
          if (res.list && res.list.length > 0) {
            console.log(res.list, '工厂数据');
            this.factoryList = res.list;
            // this.factoryList = res.list.map((el) => {
            //   return {
            //     value: el.factoryId,
            //     label: el.factoryName
            //   };
            // });
          }
        });
        console.log(this.factoryList, '工厂数据111');
      },

      async getContactList() {
        let param = {
          pageNum: 1,
          type: 2,
          size: -1,
          status: 1
        };
        await contactList(param).then((res) => {
          this.gysList = res.list;
        });
        console.log(this.gysList, '供应商数据');
      },

      handleClick(tab, event) {
        this.activeName = tab._props.name;
        if (this.activeName == '1') {
          this.resetData();
          this.attributeData.name = this.taskName + '委托';
        } else if (this.activeName == '2') {
          this.resetData();
          this.attributeData.name = this.taskName + '请托';
        }
      },

      // 仓库
      getWarehouseFn() {
        getWarehouseList().then((res) => {
          // console.log(
          //   this.$store.state.user.info.factoryId,
          //   'this.$store.state.user.info'
          // );
          // console.log(res, '仓库数据');
          this.warehouseList = res.data.filter(
            (item) => item.factoryId == this.$store.state.user.info.factoryId
          );
          // console.log(this.warehouseList, '数据');
          // console.log(res, '仓库数据');
          // this.warehouseList = res.data;
        });
      },

      changeTaskId(e) {
        console.log(e);
        const arr = this.newStepsList.find((item) => item.taskId === e);

        if (this.attributeData.taskIdes.length != 0) {
          if (this.attributeData.taskIdes.length == 1) {
            this.attributeData.sceneText = '单工序';
            this.attributeData.outsourceScene = 2;
          } else {
            this.attributeData.sceneText = '多工序';
            this.attributeData.outsourceScene = 3;
          }
          // const id = this.newStepsList[0].sourceTaskId;
          // if (this.attributeData.isFirstTask) {
          //   this.attributeData.sceneText = '首工序';
          //   this.attributeData.outsourceScene = 1;
          //   if (arr.sourceTaskId !== id) {
          //     this.attributeData.sceneText = '首工序及多工序';
          //     this.attributeData.outsourceScene = 4;
          //   }
          // } else {
          //   if (arr.sourceTaskId === id) {
          //     // 单工序
          //     this.attributeData.sceneText = '单工序';
          //     this.attributeData.outsourceScene = 2;
          //   } else {
          //     //多工序
          //     this.attributeData.sceneText = '多工序';
          //     this.attributeData.outsourceScene = 3;
          //   }
          // }
        } else {
          this.attributeData.sceneText = '';
          this.attributeData.outsourceScene = '';
          // uni.showToast({
          //   title: '委外到工序为空',
          //   icon: 'none'
          // });
        }
      },

      resetData() {
        this.attributeData.type = '';
        this.attributeData.sceneText = '';
        this.attributeData.taskIds = '';
        this.attributeData.isFirstTask = '';
        this.attributeData.clientEnvironmentId = 1;
        this.attributeData.requireDeliveryTime = '';
        this.attributeData.warehouseId = '';
        this.attributeData.produceRoutingId = '';
        this.attributeData.supplierId = '';
        this.attributeData.taskIdes = [];
        this.attributeData.factoriesId = '';
      },

      //跳转

      confirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // if (this.activeName == '1') {
            if (this.attributeData.supplierId) {
              const obj = this.gysList.find(
                (item) => item.id === this.attributeData.supplierId
              );
              this.attributeData.supplierName = obj ? obj.name : '';
            }
            this.attributeData.taskIds = this.attributeData.taskIdes.join(',');
            this.$emit('changePlugIn', this.attributeData, this.activeName);
            // } else if (this.activeName == '2') {
            //   const obj = this.factoryList.find(
            //     (item) => item.id === this.attributeData.factoriesId
            //   );
            //   this.attributeData.factoriesName = obj ? obj.name : '';
            //   this.attributeData.taskIds =
            //     this.attributeData.taskIdes.join(',');
            //   console.log(this.attributeData);
            //   this.$emit('changePlugIn', this.attributeData, this.activeName);
            // }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.$emit('changeCancel');
      }
    },
    created() {
      this.operationType = null;
      this.workListIds = [];
    }
  };
</script>

<style scoped>
  .index_box {
    padding: 0 !important;
    overflow: auto;
  }

  .c_header_title {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-left: 20px;
    height: 52px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background: var(--table-header-background-color);
    border-bottom: 1px solid var(--border-color-lighter);
  }

  .c_title {
    color: #157a2c;
    font-size: 16px;
    font-weight: bold;
  }

  .btn-box {
    margin-left: 50px;
  }

  ::v-deep .el-select__tags {
    flex-wrap: nowrap;
    overflow: auto;
  }

  /* 输入框最大宽度*/
  ::v-deep .el-select__tags-text {
    max-width: 90px;
  }

  /* 底部滚动条的高度*/
  ::v-deep .el-select__tags::-webkit-scrollbar {
    height: 2px !important;
  }
</style>