<template> 
 | 
  <GlobalWindow 
 | 
    :title="title" 
 | 
    :visible.sync="visible" 
 | 
    width="80%" 
 | 
    :confirm-working="isWorking" 
 | 
    @confirm="submit" 
 | 
  > 
 | 
    <div style="min-width:950px;width:100%"> 
 | 
      <div class="form-wrap"> 
 | 
        <div>基本信息</div> 
 | 
        <el-form :model="form" ref="form" inline :rules="rules" label-suffix=":" label-width="100px"> 
 | 
          <el-form-item label="工艺名称" prop="name"> 
 | 
            <el-input v-model="form.name"  placeholder="请输入工艺名称" max="10" v-trim/> 
 | 
          </el-form-item> 
 | 
          <el-form-item label="工艺编码" prop="code"> 
 | 
            <el-input v-model="form.code" :disabled="form.id" placeholder="可填写,忽略将自动生成" max="10" v-trim/> 
 | 
          </el-form-item> 
 | 
          <el-form-item label="所属工厂" prop="departId"> 
 | 
            <el-select v-model="form.departId" placeholder="请选择所属工厂" @visible-change="visibleChange" :loading="loading" clearable filterable @change="selectDepart"> 
 | 
              <el-option 
 | 
                v-for="item in factoreis" 
 | 
                :key="item.id" 
 | 
                :label="item.name" 
 | 
                :value="item.id"> 
 | 
              </el-option> 
 | 
            </el-select> 
 | 
          </el-form-item> 
 | 
        </el-form> 
 | 
      </div> 
 | 
      <!-- 列表 --> 
 | 
      <el-tabs v-model="activeName"> 
 | 
        <el-tab-pane label="工序列表" name="first"></el-tab-pane> 
 | 
      </el-tabs> 
 | 
      <ul class="toolbar"> 
 | 
          <li><el-button type="primary" @click="addMaterial">添加工序</el-button></li> 
 | 
          <el-button type="primary" @click="up" plain>上移</el-button> 
 | 
          <el-button type="primary" @click="down" plain>下移</el-button> 
 | 
        </ul> 
 | 
      <el-table 
 | 
        :data="form.rpList" 
 | 
        border 
 | 
        stripe 
 | 
        @selection-change="handleSelectionChange" 
 | 
      > 
 | 
        <el-table-column type="selection" fixed="left" width="55"></el-table-column> 
 | 
        <el-table-column prop="name" label="工序名称" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="code" label="工序编码" fixed="left" min-width="100px"></el-table-column> 
 | 
        <!-- <el-table-column prop="sortNum" label="加工顺序" min-width="100px"></el-table-column> --> 
 | 
        <el-table-column label="工序类型" prop="type" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            {{ row.type == 1 ? '委外' : '自有' }} 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
          <!-- <el-table-column prop="userId" label="负责人" min-width="100px"></el-table-column> --> 
 | 
        <el-table-column label="设备收集层次" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            {{ row.level == 0 ? '设备' : '设备组'  }} 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column label="操作" prop="createTime" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            <span> 
 | 
              <el-button type="text" @click="deleteProdure(row)">删除</el-button> 
 | 
            </span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
      </el-table> 
 | 
    </div> 
 | 
    <!-- 新增工序 --> 
 | 
    <SelectProcedure 
 | 
      ref="selectProcedure" 
 | 
      @selectData="selectData" 
 | 
    ></SelectProcedure> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import SelectProcedure from '@/components/ext/SelectProcedure' 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import { getDepartmentListByConditon } from '@/api/ext/departmentExt' 
 | 
  
 | 
import { validateSpecialKey } from '@/assets/js/validate' 
 | 
export default { 
 | 
  name: 'OperaBomExtWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow, Pagination, SelectProcedure }, 
 | 
  data () { 
 | 
    return { 
 | 
      // 表单数据 
 | 
      searchForm: { 
 | 
        name: '', 
 | 
        code: '' 
 | 
      }, 
 | 
      form: { 
 | 
        id: null, 
 | 
        name: '', 
 | 
        code: '', 
 | 
        departId: null, 
 | 
        rpList: [ 
 | 
        ] 
 | 
      }, 
 | 
      factoreis: [], 
 | 
      loading: false, 
 | 
      // 验证规则 
 | 
      rules: { 
 | 
        name: [ 
 | 
          { max: 10, message: '输入字数不超10', trigger: 'blur' }, 
 | 
          { required: true, message: '请输入工艺名称', trigger: 'blur' } 
 | 
        ], 
 | 
        // code: [ 
 | 
        //   { required: true, message: '请输入工艺编码', trigger: 'blur' }, 
 | 
        //   { max: 10, message: '输入字数不超10', trigger: 'blur' }, 
 | 
        //   { validator: validateSpecialKey, trigger: 'blur' } 
 | 
        //   //{ pattern: /^[0-9a-zA-Z]+$/, message: '只可以输入数字、字母和符号', trigger: 'change' } 
 | 
        // ], 
 | 
        departId: [ 
 | 
          { required: true, message: '请选择所属工厂', trigger: 'change' } 
 | 
        ] 
 | 
      }, 
 | 
      selectedRows: [], 
 | 
      productes: [], 
 | 
      selectP: [], 
 | 
      activeName: 'first', 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/ext/routeProcedureExt', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
     
 | 
  }, 
 | 
  methods: { 
 | 
    visibleChange(e) { 
 | 
      if (e) { 
 | 
        this.loading = true 
 | 
        getDepartmentListByConditon({ 
 | 
          type: 1 
 | 
        }) 
 | 
          .then(res => { 
 | 
            // console.log(res) 
 | 
            this.factoreis = res 
 | 
            this.loading = false 
 | 
          }) 
 | 
          .catch(err => { 
 | 
            console.log(err) 
 | 
            this.loading = false 
 | 
          }) 
 | 
      } 
 | 
    }, 
 | 
    open (title, target) { 
 | 
      this.title = title 
 | 
      this.visibleChange(true) 
 | 
      this.visible = true 
 | 
      this.form.rpList = [] 
 | 
      // 新建 
 | 
      if (target == null) { 
 | 
        this.$nextTick(() => { 
 | 
          this.$refs.form.resetFields() 
 | 
          this.form[this.configData['field.id']] = null 
 | 
        }) 
 | 
        return 
 | 
      } 
 | 
      // 编辑 
 | 
      this.$nextTick(() => { 
 | 
        for (const key in this.form) { 
 | 
          this.form[key] = target[key] 
 | 
        } 
 | 
        this.form.rpList = target.proceList 
 | 
        // console.log(this.form, target) 
 | 
      }) 
 | 
    }, 
 | 
    submit () { 
 | 
      // 提交修改 
 | 
      this.form.rpList.forEach((item, index, arr) => { 
 | 
        item.sortnum = index 
 | 
        arr[index] = item 
 | 
      }) 
 | 
      this.confirm() 
 | 
    }, 
 | 
    selectDepart (v) { 
 | 
      this.form.rpList = [] 
 | 
    }, 
 | 
    /* 
 | 
      工艺部分 
 | 
    */ 
 | 
    handleSelectionChange (selectedRows) { 
 | 
      this.selectedRows = selectedRows 
 | 
    }, 
 | 
    swapArray (arr, index1, index2) { 
 | 
      // 排序核心 
 | 
      arr[index1] = arr.splice(index2, 1, arr[index1])[0] 
 | 
      return arr 
 | 
    }, 
 | 
    up () { 
 | 
      if (this.selectedRows.length !== 1) { 
 | 
        this.$tip.warning('只能选择1条') 
 | 
        return 
 | 
      } 
 | 
      const selectIndex = this.form.rpList.findIndex((t) => t.id === this.selectedRows[0].id) 
 | 
      if (selectIndex === 0) { 
 | 
        this.$tip.warning('已经是第一条了') 
 | 
        return 
 | 
      } 
 | 
      this.form.rpList = this.swapArray(this.form.rpList, selectIndex, selectIndex - 1) 
 | 
    }, 
 | 
    down () { 
 | 
      if (this.selectedRows.length !== 1) { 
 | 
        this.$tip.warning('只能选择1条') 
 | 
        return 
 | 
      } 
 | 
      const selectIndex = this.form.rpList.findIndex((t) => t.id === this.selectedRows[0].id) 
 | 
      if (selectIndex === this.form.rpList.length - 1) { 
 | 
        this.$tip.warning('已经是最后一条了') 
 | 
        return 
 | 
      } 
 | 
      this.form.rpList = this.swapArray(this.form.rpList, selectIndex, selectIndex + 1) 
 | 
    }, 
 | 
    deleteProdure (row) { 
 | 
      // console.log(row) 
 | 
      this.form.rpList.splice(this.form.rpList.indexOf(row), 1) 
 | 
    }, 
 | 
    /* 
 | 
      工序 
 | 
    */ 
 | 
    addMaterial () { 
 | 
      // console.log('添加工序') 
 | 
      if (!this.form.departId) { 
 | 
        this.$tip.error('请先选择工厂') 
 | 
        return 
 | 
      } 
 | 
      const ids = this.form.rpList.map(e => { return e.id }).join(',') 
 | 
      this.$refs.selectProcedure.open('选择工序', { ids, departId: this.form.departId }) 
 | 
      // this.search() 
 | 
    }, 
 | 
    selectData (data) { 
 | 
      this.form.rpList.push(...data.selectedProcedures) 
 | 
    }, 
 | 
    __confirmCreate () { 
 | 
      this.$refs.form.validate((valid) => { 
 | 
        if (!this.form.rpList) { 
 | 
          this.$tip.console.error('至少选择一道工序') 
 | 
          return 
 | 
        } 
 | 
        if (!valid) { 
 | 
          return 
 | 
        } 
 | 
        // 调用新建接口 
 | 
        this.isWorking = true 
 | 
        this.api.create(this.form) 
 | 
          .then(() => { 
 | 
            this.visible = false 
 | 
            this.$tip.apiSuccess('新建成功') 
 | 
            this.$emit('success') 
 | 
          }) 
 | 
          .catch(e => { 
 | 
            this.$tip.apiFailed(e) 
 | 
          }) 
 | 
          .finally(() => { 
 | 
            this.isWorking = false 
 | 
          }) 
 | 
      }) 
 | 
    }, 
 | 
    __confirmEdit () { 
 | 
      this.$refs.form.validate((valid) => { 
 | 
        if (!this.form.rpList) { 
 | 
          this.$tip.console.error('至少选择一道工序') 
 | 
          return 
 | 
        } 
 | 
        if (!valid) { 
 | 
          return 
 | 
        } 
 | 
        // 调用更新接口 
 | 
        this.isWorking = true 
 | 
        this.api.updateById(this.form) 
 | 
          .then(() => { 
 | 
            this.visible = false 
 | 
            this.$tip.apiSuccess('修改成功') 
 | 
            this.$emit('success') 
 | 
          }) 
 | 
          .catch(e => { 
 | 
            this.$tip.apiFailed(e) 
 | 
          }) 
 | 
          .finally(() => { 
 | 
            this.isWorking = false 
 | 
          }) 
 | 
      }) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
.toolbar { 
 | 
  border-bottom: 1px solid #eee; 
 | 
  padding-bottom: 10px; 
 | 
  li { 
 | 
    display: inline-block; 
 | 
    margin-right: 6px; 
 | 
  } 
 | 
} 
 | 
::v-deep .el-dialog { 
 | 
  // height: calc(100% - 190px); 
 | 
  margin-top: 0 !important; 
 | 
  top: 10%; 
 | 
  bottom: 10%; 
 | 
  height: 80%; 
 | 
  min-height: 600px; 
 | 
} 
 | 
::v-deep .el-dialog__footer { 
 | 
  padding: 0px; 
 | 
} 
 | 
::v-deep .el-dialog__body { 
 | 
  height: calc(100% - 114px); 
 | 
} 
 | 
</style> 
 |