1.完成制造模型（工序定义）页面开发

loulijun2021

2022-06-30 7d0a954d23d21c0cdaff6ed20ad7291b3dbf889a

 src/views/zzmx/gxdy.vue

@@ -105,6 +105,16 @@
            sortable="custom"
          />
          <el-table-column
            prop="enable"
            label="启用状态"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <div v-if="row.enable==='Y'">是</div>
              <div v-if="row.enable==='N'">否</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="lm_user"
            label="创建人员"
            sortable="custom"
@@ -157,6 +167,7 @@
      />
    </div>

    <!--新增修改对话框-->
    <el-dialog
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
@@ -214,6 +225,116 @@
        </div>
      </span>
    </el-dialog>

    <!--    关联工作站对话框-->
    <el-dialog
      title="关联工作站"
      :visible.sync="workDialogVisible"
      width="50%"
      top="15vh"
      :close-on-click-modal="false"
      class="workDialogVisible"
      @closed="workHandleClose"
      @close="workHandleClose"
    >
      <!--      @opened="handleOpenedRoles"-->

      <div>
        <i class="el-icon-s-comment" style="color:#42b983;" /> 工序名称：{{ workDialogForm.stepname }}
      </div>
      <el-divider />
      <div>
        <div style="margin-bottom:20px">
          <i class="el-icon-s-operation" style="color:#42b983;" /> 工作站集合：
        </div>
        <div class="myCheckboxGroup">
          <div
            v-for="item in workDialogForm.workGatherArr"
            :key="item.code"
            :style="{border:item.isSelected1?'1px solid #42b983':'1px solid #eee'}"
            class="myCheckbox"
            @click="myCheckboxClick(item)"
          >
            <input
              class="myCheckboxInput"
              type="checkbox"
              :value="item.code"
              name="gather"
              :style="{color:item.isSelected2?'#42b983':'#fff'}"
              @click="myCheckboxInputClick(item)"
            >{{ item.name }}
            <!--            父子点击事件不影响-->
            <!--            onClick="event.cancelBubble = true"-->
          </div>
        </div>
      </div>
      <el-divider />
      <div>
        <div style="margin-bottom:20px">
          <i class="el-icon-s-operation" style="color:#42b983;" /> 工作站：
        </div>
        <el-tree
          ref="workTree"
          :data="workDialogForm.workTreeArr"
          show-checkbox
          node-key="code"
          default-expand-all
          :props="workTreeDefaultProps"
          @check="checkBoxClick"
        />
        <!--        @check-change="checkChange"-->

      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="workDialogVisibleCancel">取 消</el-button>
          <el-button type="primary" @click="workDialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    关联缺陷对话框-->
    <el-dialog
      title="工序关联缺陷"
      :visible.sync="defectDialogVisible"
      width="50%"
      top="15vh"
      :close-on-click-modal="false"
      class="defectDialogVisible"
      @closed="defectHandleClose"
      @close="defectHandleClose"
    >
      <!--      @opened="handleOpenedRoles"-->

      <div style="margin-bottom: 20px">
        <i class="el-icon-s-comment" style="color:#42b983;" /> 工序名称：{{ defectTreeName }}
      </div>

      <div>
        <!--        <div style="margin-bottom:20px">-->
        <!--          <i class="el-icon-s-operation" style="color:#42b983;" /> 工作站：-->
        <!--        </div>-->
        <el-tree
          ref="defectTree"
          :data="defectTree"
          show-checkbox
          node-key="code"
          style="height: 400px;"
          default-expand-all
          :props="workTreeDefaultProps"
        />
        <!--        @check="checkBoxClick"-->
        <!--        @check-change="checkChange"-->

      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="defectDialogVisibleCancel">取 消</el-button>
          <el-button type="primary" @click="defectDialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

@@ -221,7 +342,15 @@
import Pagination from '@/components/Pagination'
import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'
import { getCookie } from '@/utils/auth'
import { AddUpdateStep, DeleteStep, StepSearch } from '@/api/zzmx'
import {
  AddUpdateStep,
  DeleteStep, SaveStepAssociationDefect,
  SaveStepAssociationEqp,
  StepAssociationDefect,
  StepAssociationEqp,
  StepSearch
} from '@/api/zzmx'
import $ from 'jquery'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
@@ -268,7 +397,7 @@
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        'idid': '',
        'id': '',
        'stepcode': '',
        'stepname': '',
        'steptypecode': '',
@@ -290,8 +419,26 @@
        enable: [
          { required: true, message: '请选择状态', trigger: ['blur', 'change'] }
        ]

      }
      },
      workDialogVisible: false,
      workDialogForm: {
        stepcode: '', // 工序编码
        stepname: '', // 工序名称
        workArr: [], //  工作站所有数组
        workGatherArr: [], // 工作站集合数组
        workCodeSelectedGatherArr: [], // 工作站选中集合的code数组
        workTreeArr: [], // 工作站树数组
        workTreeSelectedArr: []// 工作站树选中的数组code集合
      },
      workTreeDefaultProps: {
        value: 'code',
        label: 'name',
        children: 'children'
      },
      defectDialogVisible: false,
      defectTreeCode: '',
      defectTreeName: '',
      defectTree: []

    }
  },
@@ -421,14 +568,337 @@
    },
    /* 关联工作站模块*/
    // 关联工作站点击
    workClick(row) {
    async workClick(row) {
      this.workDialogVisible = true
      this.workDialogForm.stepcode = row.stepcode
      this.workDialogForm.stepname = row.stepname
      const { data: res } = await StepAssociationEqp({ stepcode: this.workDialogForm.stepcode })
      this.workDialogForm.workArr = res
      let workGatherArr = []
      if (row.flwtype === 'W') { // 外协情况下
        workGatherArr = this.workDialogForm.workArr.filter(item => item.type === 'W')
      } else if (row.flwtype === 'Z') { // 自制情况下
        workGatherArr = this.workDialogForm.workArr.filter(item => item.type === 'E')
      } else { // 自制＋外协
        workGatherArr = this.workDialogForm.workArr
      }
      // this.workDialogForm.workArr[1].children = []
      const nodeKey = []// 需要树形数显的值
      workGatherArr.forEach((item, index) => {
        this.workDialogForm.workGatherArr.push({
          isSelected1: index === 0,
          isSelected2: item.flag === 'Y',
          code: item.code,
          name: item.name,
          type: item.type,
          flag: item.flag
        })
        if (item.flag === 'Y' && item.children && item.children.length > 0) {
          this.$nextTick(() => {
            $("input[name='gather']").eq(index).prop('checked', true)// 自定义单选框回显
          })
          item.children.forEach(it => {
            if (it.flag === 'Y') {
              nodeKey.push(it.code)
            }
          })
        }
        if (index === 0) {
          if (item.children && item.children.length > 0) {
            this.workDialogForm.workTreeArr = this.workDialogForm.workArr.filter(it => it.code === item.code)
            this.workDialogForm.workTreeArr[0].name = '全部'
          }
        }
        // item.flag === 'Y'&&item
      })
      console.log(nodeKey, 1)
      this.$refs.workTree.setCheckedKeys(nodeKey)
      this.workDialogForm.workTreeSelectedArr = nodeKey

      console.log(this.workDialogForm.workGatherArr, 6)
      console.log(this.workDialogForm.workTreeArr, 7)
    },
    // 大盒子点击事件
    myCheckboxClick(val) {
      console.log(val.code, 3)
      // 点击不同的盒子进行选中样式切换
      this.workDialogForm.workGatherArr.find(item => {
        item.isSelected1 = item.code === val.code
      })
      this.workDialogForm.workTreeArr = this.workDialogForm.workArr.filter(item => item.code === val.code)
      if (this.workDialogForm.workTreeArr[0].children && this.workDialogForm.workTreeArr[0].children.length > 0) {
        this.workDialogForm.workTreeArr[0].name = '全部'
      } else {
        this.workDialogForm.workTreeArr = []
      }

      console.log(this.workDialogForm.workTreeArr, 8)
    },
    // 小盒子点击事件
    myCheckboxInputClick(val) {
      val.isSelected2 = !val.isSelected2
      console.log(val.code, 1)
      this.workDialogForm.workCodeSelectedGatherArr = [...new Set(this.workDialogForm.workCodeSelectedGatherArr)]
      // 1.第一种情况  小盒子从没选中到选中
      if (val.isSelected2) {
        console.log('1.第一种情况  小盒子从没选中到选中')
        this.workDialogForm.workCodeSelectedGatherArr.push(val.code)

        this.workDialogForm.workArr.forEach((item, index) => {
          if (item.code === val.code) {
            item.flag = 'Y'
            if (item.children && item.children.length > 0) {
              item.children.forEach(it => {
                it.flag = 'Y'
                this.workDialogForm.workTreeSelectedArr.push(it.code)
              })
            }
          }
        })
      }

      // 2.第二种情况  小盒子从选中到没选中
      if (!val.isSelected2) {
        console.log('2.第二种情况  小盒子从选中到没选中')
        this.workDialogForm.workCodeSelectedGatherArr = this.workDialogForm.workCodeSelectedGatherArr.filter(item => item !== val.code)
        this.workDialogForm.workArr.forEach((item, index) => {
          if (item.code === val.code) {
            item.flag = 'N'
            if (item.children && item.children.length > 0) {
              item.children.forEach(it => {
                it.flag = 'N'
                this.workDialogForm.workTreeSelectedArr.forEach((i, ind) => {
                  if (i === it.code) {
                    this.workDialogForm.workTreeSelectedArr.splice(ind, 1)
                  }
                })
              })
            }
          }
        })
      }
      this.workDialogForm.workCodeSelectedGatherArr = [...new Set(this.workDialogForm.workCodeSelectedGatherArr)]

      console.log(this.workDialogForm.workCodeSelectedGatherArr, 2)
      console.log(this.workDialogForm.workTreeSelectedArr, 23)
      // this.$refs.workTree.setCheckedKeys(this.workDialogForm.workCodeSelectedGatherArr)
      this.$refs.workTree.setCheckedKeys(this.workDialogForm.workTreeSelectedArr)
    },
    // 树形中 框选中
    checkBoxClick(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
      console.log(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys })

      let checkedFatherCode = '' // 找到 checkedFatherCode  父code值
      this.workDialogForm.workArr.forEach((item, index) => {
        if (item.code === obj.code) {
          checkedFatherCode = item.code
        }
        if (item.children && item.children.length > 0) {
          item.children.forEach((it, ind) => {
            if (it.code === obj.code) {
              checkedFatherCode = item.code
            }
          })
        }
      })

      // 1.第一种情况  半叶为零  全叶为零
      if (checkedKeys.length === 0 && halfCheckedKeys.length === 0) {
        console.log('1.第一种情况  半叶为零  全叶为零')
        console.log(obj.code, 10)
        // this.workDialogForm.workCodeSelectedGatherArr = this.workDialogForm.workCodeSelectedGatherArr.filter(item => item !== obj.code)

        this.workDialogForm.workGatherArr.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            this.workDialogForm.workGatherArr[index].isSelected2 = false

            // item.isSelected1 = item.code === checkedFatherCode
            this.workDialogForm.workCodeSelectedGatherArr = this.workDialogForm.workCodeSelectedGatherArr.filter(it => it !== checkedFatherCode)
            this.$nextTick(() => {
              // console.log($("input[name='gather']"))
              $("input[name='gather']").eq(index).prop('checked', false)// 自定义单选框回显
            })
          }
        })

        this.workDialogForm.workArr.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            item.flag = 'N'
            if (item.children && item.children.length > 0) {
              item.children.forEach((it) => {
                it.flag = 'N'
                this.workDialogForm.workTreeSelectedArr.forEach((i, ind) => {
                  if (i === it.code) {
                    this.workDialogForm.workTreeSelectedArr.splice(ind, 1)
                  }
                })
              })
            }
          }
        })
        console.log(this.workDialogForm.workCodeSelectedGatherArr, 11)
        console.log(this.workDialogForm.workTreeSelectedArr, 18)
      }

      // 2.第二种情况  半叶不为零  全叶不为零
      if (checkedKeys.length !== 0 && halfCheckedKeys.length !== 0) {
        console.log('2.第二种情况  半叶不为零  全叶不为零')
        console.log(obj.code, 13)
        // console.log(this.$refs.workTree, 22)

        this.workDialogForm.workGatherArr.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            this.workDialogForm.workGatherArr[index].isSelected2 = true
            // this.workDialogForm.workCodeSelectedGatherArr.push(obj.code)
            this.$nextTick(() => {
              $("input[name='gather']").eq(index).prop('checked', true)// 自定义单选框回显
            })
          }
        })

        this.workDialogForm.workArr.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            item.flag = 'Y'
            if (item.children && item.children.length > 0) {
              item.children.forEach(it => {
                if (it.code === obj.code) {
                  console.log(it.code, 21)
                  if (it.flag === 'Y' && it.code === obj.code) {
                    it.flag = 'N'
                    this.workDialogForm.workTreeSelectedArr.forEach((i, ind) => {
                      if (i === it.code) {
                        console.log(i, 333)
                        this.workDialogForm.workTreeSelectedArr.splice(ind, 1)
                      }
                    })
                  } else if (it.flag === 'N' && it.code === obj.code) {
                    it.flag = 'Y'
                    console.log(2222)
                    this.workDialogForm.workTreeSelectedArr.push(it.code)
                  }
                }
              })
            }

            console.log(this.workDialogForm.workTreeSelectedArr, 17)

            // this.$nextTick(() => {
            //   $("input[name='gather']").eq(index).prop('checked', true)// 自定义单选框回显
            // })
          }
        })
      }

      // 3.第三种情况  半叶为零  全叶不为零
      if (checkedKeys.length !== 0 && halfCheckedKeys.length === 0) {
        console.log('3.第三种情况  半叶为零  全叶不为零')
        console.log(obj.code, 12)
        this.workDialogForm.workGatherArr.forEach((item, index) => {
          if (item.code === obj.code) {
            this.workDialogForm.workGatherArr[index].isSelected2 = true
            this.workDialogForm.workCodeSelectedGatherArr.push(obj.code)
            this.$nextTick(() => {
              $("input[name='gather']").eq(index).prop('checked', true)// 自定义单选框回显
            })
          }
        })

        this.workDialogForm.workArr.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            item.flag = 'Y'
            if (item.children && item.children.length > 0) {
              item.children.forEach(it => {
                it.flag = 'Y'
                this.workDialogForm.workTreeSelectedArr.push(it.code)
              })
            }
          }
        })
      }
      this.workDialogForm.workTreeSelectedArr = [...new Set(this.workDialogForm.workTreeSelectedArr)]

      this.$refs.workTree.setCheckedKeys(this.workDialogForm.workTreeSelectedArr)
      console.log(this.workDialogForm.workTreeSelectedArr, 14)
      console.log(this.workDialogForm.workArr, 15)
    },
    // 对话框关闭事件
    workHandleClose() {
      this.workDialogForm.workArr = []
      this.workDialogForm.workGatherArr = []
      this.workDialogForm.workTreeArr = []
      this.$refs.workTree.setCheckedKeys([])
    },
    // 取消
    workDialogVisibleCancel() {
      this.workDialogVisible = false
    },
    // 确认
    async workDialogVisibleConfirm() {
      this.workDialogForm.workTreeSelectedArr = [...new Set(this.workDialogForm.workTreeSelectedArr)]
      console.log(this.workDialogForm.workTreeSelectedArr, 18)
      console.log(this.workDialogForm.workArr, 20)
      const data = []
      this.workDialogForm.workArr.forEach(item => {
        if (item.flag === 'Y' && item.children && item.children.length > 0) {
          item.children.forEach(it => { //  保存接口只传最子项  name传的是type
            if (it.flag === 'Y') {
              data.push({ code: it.code, name: it.type })
            }
          })
        }
      })
      console.log(data)
      const res = await SaveStepAssociationEqp(this.workDialogForm.stepcode, data)
      if (res.code === '200') {
        this.$message.success('保存成功！')
        this.workDialogVisible = false
      }
    },
    /* 关联缺陷*/
    //  关联缺陷点击
    defectClick(row) {
    async defectClick(row) {
      this.defectTreeCode = row.stepcode
      this.defectTreeName = row.stepname
      this.defectDialogVisible = true

      const { data: res } = await StepAssociationDefect({ stepcode: row.stepcode })
      // this.defectTree = res
      this.defectTree.push({ code: 'QB', name: '全部', children: res, flag: 'N' })
      console.log(this.defectTree, 6)
      const nokeKey = []
      this.defectTree[0].children.forEach(item => {
        if (item.flag === 'Y') {
          nokeKey.push(item.code)
        }
      })
      console.log(nokeKey, 2)
      this.$nextTick(() => {
        this.$refs.defectTree.setCheckedKeys(nokeKey)
      })
    },
    // 关闭
    defectHandleClose() {
      this.defectTree = []
    },
    // 取消
    defectDialogVisibleCancel() {
      this.defectDialogVisible = false
    },
    // 确认
    async  defectDialogVisibleConfirm() {
      const nodeKey = this.$refs.defectTree.getCheckedKeys()
      const data = []
      this.defectTree[0].children.forEach(item => {
        if (nodeKey.includes(item.code)) {
          console.log(item.code)
          data.push({ code: item.code, name: item.name })
        }
      })
      const res = await SaveStepAssociationDefect(this.defectTreeCode, data)
      if (res.code === '200') {
        this.$message.success('保存成功！')
        this.defectDialogVisible = false
      }
    }
  }
}
@@ -445,9 +915,11 @@
  border: none;
  padding: 0 20px;
}

::v-deep .el-button--primary:hover {
  border: none;
}

::v-deep .el-button--info {
  height: 30px;
  display: flex;
@@ -485,6 +957,70 @@
  padding: 20px 100px !important;
}

.defectDialogVisible {
  ::v-deep .el-dialog__body {
    padding: 20px 20px !important;
  }
}

.workDialogVisible {
  ::v-deep .el-dialog__body {
    padding: 20px 20px !important;
  }

  .myCheckboxGroup {
    display: flex;
    flex-wrap: wrap;

    .myCheckbox {
      border: 1px solid #eee;
      display: flex;
      min-width: 100px;
      padding: 10px;
      margin: 10px 30px 0 0;
      border-radius: 5px;
      cursor: default;

      .myCheckboxInput {
        margin: 1px 5px 0 0;
        cursor: pointer;
      }

    }

    input[type=checkbox] {
      cursor: pointer;
      position: relative;
      width: 14px;
      height: 14px;
      font-size: 14px;
    }

    input[type=checkbox]::after {
      position: absolute;
      top: 0;
      color: $main_color;
      width: 14px;
      height: 14px;
      display: inline-block;
      visibility: visible;
      padding-left: 0;
      text-align: center;
      content: ' ';
      border-radius: 3px
    }

    input[type=checkbox]:checked::after {
      content: "✓";
      //content: "√";
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      background-color: $main_color;
    }
  }
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: $main_color;
  border-color: $main_color;
@@ -503,6 +1039,7 @@
  height: 30px;
  line-height: 30px;
}

::v-deep .el-input__inner:focus {
  border-color: $main_color;
}
@@ -579,17 +1116,19 @@
  border-color: $main_color;
}

::v-deep .el-select .el-input__inner:focus{
::v-deep .el-select .el-input__inner:focus {
  border-color: $main_color;
}

::v-deep .el-select-dropdown__item.selected{
::v-deep .el-select-dropdown__item.selected {
  color: $main_color;
}
::v-deep .el-checkbox__inner:hover{

::v-deep .el-checkbox__inner:hover {
  border-color: $main_color;
}
::v-deep .el-textarea__inner:focus{

::v-deep .el-textarea__inner:focus {
  border-color: $main_color;
}