1.根据客户需求修改 看板内容、新增字段

小小儁爺

2024-12-25 c6da28cde9dc469ee1e2d4dba4b7234307d9bd5a

1.根据客户需求修改  看板内容、新增字段

 src/api/kanbanManager.js

@@ -1,5 +1,33 @@
import request from '@/utils/request'

export function ProductionStockedInRightBottom() {
  return request({
    url: 'KanBanManagerent/ProductionStockedInRightBottom',
    method: 'get'
  })
}

export function ProcureOutsourcRightTop() {
  return request({
    url: 'KanBanManagerent/ProcureOutsourcRightTop',
    method: 'get'
  })
}

export function ProductConsignmentLeftBottom() {
  return request({
    url: 'KanBanManagerent/ProductConsignmentLeftBottom',
    method: 'get'
  })
}

export function ProcureOutsourcLeftTop() {
  return request({
    url: 'KanBanManagerent/ProcureOutsourcLeftTop',
    method: 'get'
  })
}

// è½¦é—´çœ‹æ¿,上生产信息
export function WorkShopProduceTopData(data) {
  return request({

 src/utils/myEcharts.js

@@ -356,13 +356,13 @@

// ç»¼åˆçœ‹æ¿å›¾
export function bar02(dataArr, titlenameArr) {
  // const data = [700, 600, 50, 40, 30]
  // const titlename = ['500ml提手盖咖啡杯 è“è‰² å–·å¡‘', '500ml提手盖咖啡杯 è“è‰² å–·å¡‘', '尺寸', '颜色', '大小']
  // const data = [70, 60, 50, 40, 30]
  // const titlename = ['外观划伤', '表面油污', '尺寸', '颜色', '大小']
  // const data = val.map(i => i.cont)
  // const titlename = val.map(i => i.name)
  const data = dataArr.filter((item, index) => index < 5)
  const data = dataArr.filter((item, index) => index < 10)

  const titlename = titlenameArr.filter((item, index) => index < 5)
  const titlename = titlenameArr.filter((item, index) => index < 10)

  const length = titlename.length
  if (titlename.length < 5) {
@@ -371,13 +371,14 @@
    }
  }

  console.log(titlename, 123)

  // const valdata = [683, 500, 400, 300, 200]
  const valdata = [683, 500, 400, 300, 200]
  // const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
  // const myColor = ['#0000FF']
  // const myColor = ['#7af5f5', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF']
  const myColor = ['rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)']
  const myColor = [
    'rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)',
    'rgba(122,245,245,0.75)', 'rgba(122,245,245,0.7)', 'rgba(122,245,245,0.65)', 'rgba(122,245,245,0.6)', 'rgba(122,245,245,0.55)'
  ]
  const option = {
    animation: false,
    backgroundColor: 'transparent',
@@ -423,16 +424,11 @@
          show: false
        },
        axisLabel: {
          show: false,
          // color: '#fff',
          color: function(value, index) {
            return value === '0' ? 'transparent' : '#fff'
          },
          verticalAlign: 'bottom',
          // align: 'left',
          // margin: 80,
          fontSize: 20,

          // formatter: function(value, index) {
          //   return [
          //     '{lg|' + (index + 1) + '、   }' + '{title|' + value + '} '
@@ -462,12 +458,12 @@
        }
      },
      {
        show: true,
        show: false,
        inverse: true,
        data: data,
        data: valdata,
        axisLabel: {
          textStyle: {
            fontSize: 20,
            fontSize: 12,
            color: '#fff'
          }
        },
@@ -502,24 +498,13 @@
        },
        label: {
          normal: {
            color: '#fff',
            show: true,
            position: [0, '-20px'],
            textStyle: {
              fontSize: 16
            },
            formatter: function(a, b) {
              return a.name
            }
            position: 'right',
            formatter: '{c}',
            fontSize: 20,
            color: '#fff'
            // formatter: '{c}%',
          }
          // normal: {
          //   show: true,
          //   position: 'right',
          //   formatter: '{c}',
          //   fontSize: 20,
          //   color: '#fff'
          //   // formatter: '{c}%',
          // }
        }
      }
    ]

 src/views/basicSettings/personList.vue

@@ -1,715 +1,769 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div style="display: flex">

        <!--        background:rgba(248,248,250,1);-->

        <div style="width: 300px;margin: 10px 10px 0  0;background: #fff">



          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">

            <div style="display: flex;">

              <div

                style="width: 5px;height: 100%;border-radius: 5px;"

                :style="{background:$store.state.settings.theme}"

              />

              <div style="margin-left: 8px;">组织架构</div>

            </div>



            <!--            <div style="margin-right:10px">-->

            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" />-->

            <!--            </div>-->



          </div>



          <el-tree

            ref="treeLeftRef"

            key="treeLeftKey"

            style="padding: 10px;overflow: auto;"

            :style="{height:(tableHeight+180)+'px'}"

            :data="treeLeft"

            node-key="torg_code"

            highlight-current

            :props="defaultPropsLeft"

            :default-expand-all="true"

            :expand-on-click-node="false"

            @node-click="nodeClick"

          />



        </div>



        <div style="width: calc(100% - 300px)">

          <div class="bodyTopButtonGroup" style="justify-content: space-between">

            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

            <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=3')">导入</el-button>

          </div>



          <div class="bodyTopFormGroup">

            <el-form

              ref="form"

              :model="form"

              label-width="100px"

              inline

              style="display: flex;"

            >

              <div class="elForm">

                <el-form-item label="用户编码" style=" display: flex;">

                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />

                </el-form-item>

                <el-form-item label="用户名称" style=" display: flex;">

                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />

                </el-form-item>

                <!--                <el-form-item label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

              </div>

              <div

                class="bodySearchReset"

                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

              >

                <el-button v-waves type="primary" icon="el-icon-search" @click="getUserData">查询</el-button>

                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

              </div>

            </el-form>

            <div

              class="bodyTopFormExpand"

              style="height: 5px;"

            >

              <!--              <svg-icon-->

              <!--                v-show="mouseHoverType==='mouseout'"-->

              <!--                style="cursor: pointer"-->

              <!--                :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

              <!--                @mouseenter="mouseHoverType=$event.type"-->

              <!--              />-->

              <!--              <svg-icon-->

              <!--                v-show="mouseHoverType==='mouseenter'"-->

              <!--                style="cursor: pointer"-->

              <!--                :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

              <!--                @click="isExpandForm=!isExpandForm"-->

              <!--                @mouseout="mouseHoverType=$event.type"-->

              <!--              />-->

            </div>

          </div>



          <div class="elTableDiv">

            <el-table

              ref="tableDataRef"

              class="tableFixed"

              :data="tableData"

              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"

              border

              row-class-name="custom-row"

              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"

              highlight-current-row

              :header-cell-style="this.$headerCellStyle"

              :cell-style="this.$cellStyle"

              @sort-change="sortChange"

            >

              <el-table-column

                prop="rowNum"

                width="50"

                fixed

                label="序号"

              />

              <el-table-column

                prop="usercode"

                label="用户编码"

                sortable="custom"

                show-overflow-tooltip

              />

              <el-table-column

                prop="username"

                label="用户名称"

                sortable="custom"

                show-overflow-tooltip

              />

              <el-table-column

                prop="storg_name"

                label="所属组织"

                show-overflow-tooltip

                sortable="custom"

              >

                <template slot-scope="{row}">

                  <div v-if="row.storg_name">{{ row.storg_name }}</div>

                  <div v-else>/</div>

                </template>

              </el-table-column>

              <el-table-column

                prop="status"

                label="状态"

                show-overflow-tooltip

                sortable="custom"

              >

                <template slot-scope="{row}">

                  <el-tag v-if="row.status==='Y'" size="small" type="success">在职</el-tag>

                  <el-tag v-if="row.status==='N'" size="small" type="danger">离职</el-tag>

                </template>

              </el-table-column>

              <el-table-column

                prop="email"

                label="邮箱"

                sortable="custom"

                show-overflow-tooltip

              >

                <template slot-scope="{row}">

                  {{ row.email ? row.email : '/' }}

                </template>

              </el-table-column>

              <el-table-column

                prop="mobile"

                label="号码"

                sortable="custom"

                show-overflow-tooltip

              >

                <template slot-scope="{row}">

                  {{ row.mobile ? row.mobile : '/' }}

                </template>

              </el-table-column>

              <el-table-column

                prop="postname"

                label="岗位"

                sortable="custom"

                show-overflow-tooltip

              >

                <template slot-scope="{row}">

                  {{ row.postname ? row.postname : '/' }}

                </template>

              </el-table-column>

              <el-table-column

                prop="rolename"

                label="角色"

                sortable="custom"

                show-overflow-tooltip

              >

                <template slot-scope="{row}">

                  {{ row.rolename ? row.rolename : '/' }}

                </template>

              </el-table-column>

              <el-table-column

                prop="group_name"

                label="班组"

                sortable="custom"

                show-overflow-tooltip

              >

                <template slot-scope="{row}">

                  {{ row.group_name ? row.group_name : '/' }}

                </template>

              </el-table-column>

              <el-table-column

                prop="createusername"

                label="创建人员"

                sortable="custom"

              />

              <el-table-column

                prop="lm_date"

                label="创建时间"

                width="160"

                sortable="custom"

              />

              <el-table-column

                label="操作"

                width="120"

                fixed="right"

              >

                <template slot-scope="{row}">

                  <div class="operationClass">

                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                      <i

                        v-if="row.usercode!=='9999'"

                        class="el-icon-edit-outline"

                        :style="{color:$store.state.settings.theme}"

                        @click="edit('edit',row)"

                      />

                    </el-tooltip>

                    <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                      <i

                        v-if="row.usercode!=='9999'"

                        class="el-icon-delete"

                        :style="{color:$store.state.settings.theme}"

                        @click="del(row)"

                      />

                    </el-tooltip>

                  </div>

                </template>

              </el-table-column>

            </el-table>

          </div>

          <!--分页-->

          <pagination

            :total="total"

            :page.sync="form.page"

            :limit.sync="form.rows"

            align="right"

            layout="total,prev, pager, next,sizes,jumper"

            popper-class="select_bottom"

            @pagination="getUserData"

          />

        </div>



      </div>



    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

        <el-form-item label="用户编码" prop="usercode">

          <el-input v-model="dialogForm.usercode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="用户名称" prop="username">

          <el-input v-model="dialogForm.username" style="width: 200px" />

        </el-form-item>



        <el-form-item label="用户密码" prop="password">

          <el-input v-model="dialogForm.password" style="width: 200px" />

        </el-form-item>



        <el-form-item label="所属组织" prop="storg_code">

          <el-cascader

            ref="cascader"

            v-model="dialogForm.storg_code"

            :options="cascaderOptions"

            filterable

            :props="defaultProps"

            :show-all-levels="false"

          />

        </el-form-item>



        <el-form-item label="手机号" prop="mobile">

          <el-input v-model="dialogForm.mobile" style="width: 200px" />

        </el-form-item>

        <el-form-item label="邮箱" prop="email">

          <el-input v-model="dialogForm.email" style="width: 200px" />

        </el-form-item>



        <el-form-item required label="用户状态">

          <el-radio-group v-model="dialogForm.status" style="width: 200px;">

            <el-radio label="Y">在职</el-radio>

            <el-radio label="N">离职</el-radio>

          </el-radio-group>

        </el-form-item>



        <el-form-item prop="post_code" label="岗位">

          <el-select

            v-model="dialogForm.post_code"

            style="width:490px"

            placeholder="请选择"

            multiple

            filterable

            clearable

            collapse-tags

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in postArr"

              :key="item.postcode"

              :label="item.postname"

              :value="item.postcode"

            />

          </el-select>

        </el-form-item>



        <el-form-item prop="role_code" label="角色">

          <el-select

            v-model="dialogForm.role_code"

            style="width:490px"

            multiple

            filterable

            clearable

            collapse-tags

            placeholder="请选择"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in roleArr"

              :key="item.rolecode"

              :label="item.rolename"

              :value="item.rolecode"

            />

          </el-select>

        </el-form-item>

        <el-form-item prop="group_code" label="班组">

          <el-select

            v-model="dialogForm.group_code"

            style="width: 490px"

            placeholder="请选择"

            :popper-append-to-body="false"

            multiple

            filterable

            collapse-tags

            clearable

          >

            <el-option

              v-for="item in groupArr"

              :key="item.usergroupcode"

              :label="item.usergroupname"

              :value="item.usergroupcode"

            />

          </el-select>

        </el-form-item>



      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >ç¡® å®š</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import {

  AddUpdateUserSave,

  DeleteUserSave, UserData

} from '@/api/basicSettings'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import arrayToTree from 'array-to-tree'

import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData'



export default {

  name: 'PersonList',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    const validateMobile = (rule, value, callback) => {

      if (!value) {

        callback()

        // return callback(new Error('请输入电话号码'))

      } else {

        const mobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // é•¿å·

        const mobile2 = /^[0-9]{6}$/ // çŸ­å·

        if (mobile.test(value) || mobile2.test(value)) {

          callback()

          // return callback(new Error('电话号码不符合规则'))

        } else {

          return callback(new Error('电话号码不符合规则'))

          // callback()

        }

      }

    }

    const validateEmail = (rule, value, callback) => {

      if (!value) {

        callback()

        // return callback(new Error('请输入电子邮箱'))

      } else {

        const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/

        if (email.test(value)) {

          callback()

        } else {

          return callback(new Error('电子邮箱不符合规则'))

        }

      }

    }

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      form: {

        usercode: '',

        username: '',

        storgcode: '', // ç»„织编码

        prop: 'lm_date', // æŽ’序字段

        order: 'desc', // æŽ’序字段

        page: 1, // ç¬¬å‡ é¡µ

        rows: 20 // æ¯é¡µå¤šå°‘条

      },

      total: 10,

      tableData: [],

      dialogVisible: false,

      dialogForm: {

        usercode: '', // ç”¨æˆ·ç¼–码

        username: '', // ç”¨æˆ·åç§°

        post_code: [], // å²—位

        role_code: [], // è§’色

        group_code: [], // ç­ç»„

        password: '123456', // å¯†ç 

        storg_code: '', // æ‰€å±žç»„织

        mobile: '', // å·ç 

        email: '', // é‚®ç®±

        status: 'Y'// çŠ¶æ€

      },

      operation: '',

      dialogFormRules: {

        usercode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        username: [

          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }

        ],

        password: [

          { required: true, message: '请输入用户密码', trigger: ['blur', 'change'] }

        ],

        mobile: [

          { required: false, validator: validateMobile, trigger: ['blur', 'change'] }

        ],

        email: [

          { required: false, validator: validateEmail, trigger: ['blur', 'change'] }

        ],

        storg_code: [

          { required: true, message: '请选择所属组织', trigger: ['blur', 'change'] }

        ]

      },

      defaultProps: {

        checkStrictly: true,

        expandTrigger: 'hover',

        value: 'torg_code',

        label: 'torg_name'

      },

      Options: [],

      cascaderOptions: [],



      postArr: [],

      roleArr: [],

      groupArr: [],



      defaultPropsLeft: {

        children: 'children',

        label: 'torg_name'

      },

      treeLeft: []



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getUserData()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    this.getPrentOrganization()

    this.getAllSelectData()

  },

  methods: {

    // ç»„织架构大列表查询

    async getUserData() {

      const res = await UserData(this.form)

      this.tableData = res.data

      this.total = res.count

    },

    // ç»„织架构级联选择器

    async getPrentOrganization() {

      const { data: res } = await PrentOrganization()

      this.Options = res

      this.cascaderOptions = arrayToTree(res, {

        parentProperty: 'parent_id',

        customID: 'torg_code',

        childrenProperty: 'children'

      })

      this.$nextTick(() => {

        this.treeLeft = this.cascaderOptions

        this.$forceUpdate()

      })

    },

    // å²—位 è§’色 ç­ç»„

    async getAllSelectData() {

      const { data: res1 } = await PostPermissions()

      this.postArr = res1



      const { data: res2 } = await RolePermissions()

      this.roleArr = res2



      const { data: res3 } = await GroupsPermissions()

      this.groupArr = res3

    },



    // æŽ’序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getUserData()

    },

    nodeClick(obj, Node, VueComponent) {

      this.form.storgcode = obj.torg_code

      this.getUserData()

    },

    // é‡ç½®

    reset() {

      this.form.usercode = ''

      this.form.username = ''

      this.form.storgcode = ''

      this.$refs.treeLeftRef.setCurrentKey(null)

      this.getUserData()

    },

    // æ–°å¢žæŒ‰é’®

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

    },

    // ä¿®æ”¹æŒ‰é’®

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'



      // this.cascaderOptions = this.filterChildren(this.cascaderOptions, row.storg_code)

      this.$nextTick(() => {

        this.dialogForm.usercode = row.usercode

        this.dialogForm.username = row.username

        this.dialogForm.password = row.password

        this.dialogForm.mobile = row.mobile

        this.dialogForm.email = row.email

        this.dialogForm.status = row.status

        this.dialogForm.storg_code = this.findParent([], row.storg_code, this.cascaderOptions).reverse()



        this.dialogForm.post_code = row.post_code ? row.post_code.split(',') : []

        this.dialogForm.role_code = row.role_code ? row.role_code.split(',') : []

        this.dialogForm.group_code = row.group_code ? row.group_code.split(',') : []

      })

    },

    filterChildren(treeData, code) {

      treeData.forEach(item => {

        if (code.split(',').includes(item.torg_code)) {

          item.disabled = true

          if (item.children && item.children.length > 0) {

            this.filterChildren(item.children, item.children.map(it => it.torg_code).join(','))

          }

        } else {

          if (item.children && item.children.length > 0) {

            this.filterChildren(item.children, code)

          }

        }

      })

      return treeData

    },

    // parents:用于返回的数组，childNode:要查询的节点，treeData：json树形数据

    findParent(parents, childNode, treeData) {

      // console.log(parents, childNode, treeData, 2)



      for (let i = 0; i < treeData.length; i++) {

        // çˆ¶èŠ‚点查询条件

        if (treeData[i].torg_code === childNode) {

          // å¦‚果找到结果,保存当前节点

          parents.push(treeData[i].torg_code)

          // ç”¨å½“前节点再去原数据查找当前节点的父节点

          this.findParent(parents, treeData[i].parent_id, this.cascaderOptions)

          break

        } else {

          if (treeData[i].children instanceof Array) {

            //    æ²¡æ‰¾åˆ°ï¼ŒéåŽ†è¯¥èŠ‚点的子节点

            this.findParent(parents, childNode, treeData[i].children)

          }

        }

      }

      return parents

    },

    // åˆ é™¤æŒ‰é’®

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteUserSave({ usercode: row.usercode }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getUserData()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶

    handleClose() {

      this.dialogForm.usercode = ''

      this.dialogForm.username = ''

      this.dialogForm.status = 'Y'



      this.dialogForm.post_code = []

      this.dialogForm.role_code = []

      this.dialogForm.group_code = []

      this.dialogForm.password = '123456'

      this.dialogForm.mobile = ''

      this.dialogForm.email = ''



      // this.dialogForm.storg_code = ''



      this.$refs.cascader.checkedValue = ''

      this.$refs.dialogForm.clearValidate()

    },

    // å¯¹è¯æ¡†å–消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // å¯¹è¯æ¡†ç¡®è®¤

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          this.dialogForm.group_code = this.dialogForm.group_code.join(',')

          this.dialogForm.post_code = this.dialogForm.post_code.join(',')

          this.dialogForm.role_code = this.dialogForm.role_code.join(',')

          this.dialogForm.storg_code = this.dialogForm.storg_code[this.dialogForm.storg_code.length - 1]

          AddUpdateUserSave(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getUserData()

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    // èŽ·å–页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 280

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="display: flex">
        <!--        background:rgba(248,248,250,1);-->
        <div style="width: 220px;margin: 10px 10px 0  0;background: #fff">

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="margin-left: 8px;">组织架构</div>
            </div>

            <!--            <div style="margin-right:10px">-->
            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" />-->
            <!--            </div>-->

          </div>

          <el-tree
            ref="treeLeftRef"
            key="treeLeftKey"
            style="padding: 10px;overflow: auto;"
            :style="{height:(tableHeight+180)+'px'}"
            :data="treeLeft"
            node-key="torg_code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="nodeClick"
          />

        </div>

        <div style="width: calc(100% - 220px)">
          <div class="bodyTopButtonGroup" style="justify-content: space-between">
            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
            <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=3')">导入</el-button>
          </div>

          <div class="bodyTopFormGroup">
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              inline
              style="display: flex;"
            >
              <div class="elForm">
                <el-form-item label="用户编码" style=" display: flex;">
                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item label="用户名称" style=" display: flex;">
                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <!--                <el-form-item label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
              </div>
              <div
                class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
              >
                <el-button v-waves type="primary" icon="el-icon-search" @click="getUserData">查询</el-button>
                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
              </div>
            </el-form>
            <div
              class="bodyTopFormExpand"
              style="height: 5px;"
            >
              <!--              <svg-icon-->
              <!--                v-show="mouseHoverType==='mouseout'"-->
              <!--                style="cursor: pointer"-->
              <!--                :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
              <!--                @mouseenter="mouseHoverType=$event.type"-->
              <!--              />-->
              <!--              <svg-icon-->
              <!--                v-show="mouseHoverType==='mouseenter'"-->
              <!--                style="cursor: pointer"-->
              <!--                :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
              <!--                @click="isExpandForm=!isExpandForm"-->
              <!--                @mouseout="mouseHoverType=$event.type"-->
              <!--              />-->
            </div>
          </div>

          <div class="elTableDiv">
            <el-table
              ref="tableDataRef"
              class="tableFixed"
              :data="tableData"
              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"
              border
              row-class-name="custom-row"
              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"
              highlight-current-row
              :header-cell-style="this.$headerCellStyle"
              :cell-style="this.$cellStyle"
              @sort-change="sortChange"
            >
              <el-table-column
                prop="rowNum"
                width="50"
                fixed
                label="序号"
              />
              <el-table-column
                prop="usercode"
                label="用户编码"
                sortable="custom"
                min-width="105"
                show-overflow-tooltip
              />
              <el-table-column
                prop="username"
                label="用户名称"
                min-width="105"
                sortable="custom"
                show-overflow-tooltip
              />
              <el-table-column
                prop="storg_name"
                label="所属组织"
                min-width="105"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="{row}">
                  <div v-if="row.storg_name">{{ row.storg_name }}</div>
                  <div v-else>/</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="status"
                min-width="105"
                label="状态"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="{row}">
                  <el-tag v-if="row.status==='Y'" size="small" type="success">在职</el-tag>
                  <el-tag v-if="row.status==='N'" size="small" type="danger">离职</el-tag>
                </template>
              </el-table-column>

              <el-table-column
                prop="payrate"
                min-width="105"
                label="薪资类型"
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.payrate ? PayRateArr.find(i=>i.code === row.payrate).name : '/' }}
                </template>
              </el-table-column>

              <el-table-column
                prop="email"
                label="邮箱"
                min-width="105"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="{row}">
                  {{ row.email ? row.email : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="mobile"
                label="号码"
                min-width="105"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="{row}">
                  {{ row.mobile ? row.mobile : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="postname"
                label="岗位"
                sortable="custom"
                min-width="105"
                show-overflow-tooltip
              >
                <template slot-scope="{row}">
                  {{ row.postname ? row.postname : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="rolename"
                label="角色"
                sortable="custom"
                min-width="105"
                show-overflow-tooltip
              >
                <template slot-scope="{row}">
                  {{ row.rolename ? row.rolename : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="group_name"
                label="班组"
                min-width="105"
                sortable="custom"
                show-overflow-tooltip
              >
                <template slot-scope="{row}">
                  {{ row.group_name ? row.group_name : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="createusername"
                label="创建人员"
                sortable="custom"
                min-width="105"
              />
              <el-table-column
                prop="lm_date"
                label="创建时间"
                width="160"
                sortable="custom"
              />
              <el-table-column
                label="操作"
                width="80"
                fixed="right"
              >
                <template slot-scope="{row}">
                  <div class="operationClass">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <i
                        v-if="row.usercode!=='9999'"
                        class="el-icon-edit-outline"
                        :style="{color:$store.state.settings.theme}"
                        @click="edit('edit',row)"
                      />
                    </el-tooltip>
                    <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                      <i
                        v-if="row.usercode!=='9999'"
                        class="el-icon-delete"
                        :style="{color:$store.state.settings.theme}"
                        @click="del(row)"
                      />
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--分页-->
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes,jumper"
            popper-class="select_bottom"
            @pagination="getUserData"
          />
        </div>

      </div>

    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="用户编码" prop="usercode">
          <el-input v-model="dialogForm.usercode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="dialogForm.username" style="width: 200px" />
        </el-form-item>

        <el-form-item label="用户密码" prop="password">
          <el-input v-model="dialogForm.password" style="width: 200px" />
        </el-form-item>

        <el-form-item label="所属组织" prop="storg_code">
          <el-cascader
            ref="cascader"
            v-model="dialogForm.storg_code"
            :options="cascaderOptions"
            filterable
            :props="defaultProps"
            :show-all-levels="false"
          />
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="dialogForm.mobile" style="width: 200px" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dialogForm.email" style="width: 200px" />
        </el-form-item>

        <el-form-item required label="用户状态">
          <el-radio-group v-model="dialogForm.status" style="width: 200px;">
            <el-radio label="Y">在职</el-radio>
            <el-radio label="N">离职</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="payrate" label="薪资类型">
          <el-select
            v-model="dialogForm.payrate"
            style="width:200px"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in PayRateArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="post_code" label="岗位">
          <el-select
            v-model="dialogForm.post_code"
            style="width:490px"
            placeholder="请选择"
            multiple
            filterable
            clearable
            collapse-tags
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in postArr"
              :key="item.postcode"
              :label="item.postname"
              :value="item.postcode"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="role_code" label="角色">
          <el-select
            v-model="dialogForm.role_code"
            style="width:490px"
            multiple
            filterable
            clearable
            collapse-tags
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in roleArr"
              :key="item.rolecode"
              :label="item.rolename"
              :value="item.rolecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="group_code" label="班组">
          <el-select
            v-model="dialogForm.group_code"
            style="width: 490px"
            placeholder="请选择"
            :popper-append-to-body="false"
            multiple
            filterable
            collapse-tags
            clearable
          >
            <el-option
              v-for="item in groupArr"
              :key="item.usergroupcode"
              :label="item.usergroupname"
              :value="item.usergroupcode"
            />
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  AddUpdateUserSave,
  DeleteUserSave, UserData
} from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import arrayToTree from 'array-to-tree'
import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData'

export default {
  name: 'PersonList',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!value) {
        callback()
        // return callback(new Error('请输入电话号码'))
      } else {
        const mobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ // é•¿å·
        const mobile2 = /^[0-9]{6}$/ // çŸ­å·
        if (mobile.test(value) || mobile2.test(value)) {
          callback()
          // return callback(new Error('电话号码不符合规则'))
        } else {
          return callback(new Error('电话号码不符合规则'))
          // callback()
        }
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (!value) {
        callback()
        // return callback(new Error('请输入电子邮箱'))
      } else {
        const email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
        if (email.test(value)) {
          callback()
        } else {
          return callback(new Error('电子邮箱不符合规则'))
        }
      }
    }
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        usercode: '',
        username: '',
        storgcode: '', // ç»„织编码
        prop: 'lm_date', // æŽ’序字段
        order: 'desc', // æŽ’序字段
        page: 1, // ç¬¬å‡ é¡µ
        rows: 20 // æ¯é¡µå¤šå°‘条
      },
      total: 10,
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        usercode: '', // ç”¨æˆ·ç¼–码
        username: '', // ç”¨æˆ·åç§°
        post_code: [], // å²—位
        role_code: [], // è§’色
        group_code: [], // ç­ç»„
        password: '123456', // å¯†ç 
        storg_code: '', // æ‰€å±žç»„织
        mobile: '', // å·ç 
        email: '', // é‚®ç®±
        status: 'Y', // çŠ¶æ€
        payrate: ''// è–ªèµ„类型
      },
      operation: '',
      dialogFormRules: {
        usercode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        username: [
          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: ['blur', 'change'] }
        ],
        mobile: [
          { required: false, validator: validateMobile, trigger: ['blur', 'change'] }
        ],
        email: [
          { required: false, validator: validateEmail, trigger: ['blur', 'change'] }
        ],
        storg_code: [
          { required: true, message: '请选择所属组织', trigger: ['blur', 'change'] }
        ],
        payrate: [
          { required: true, message: '请选择薪资类型', trigger: ['blur', 'change'] }
        ]
      },
      defaultProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'torg_code',
        label: 'torg_name'
      },
      Options: [],
      cascaderOptions: [],

      postArr: [],
      roleArr: [],
      groupArr: [],
      PayRateArr: [
        { code: 'S', name: '计件' },
        { code: 'T', name: '计时' },
        { code: 'M', name: '按月' }
      ],

      defaultPropsLeft: {
        children: 'children',
        label: 'torg_name'
      },
      treeLeft: []

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  created() {
    this.getUserData()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.getPrentOrganization()
    this.getAllSelectData()
  },
  methods: {
    // ç»„织架构大列表查询
    async getUserData() {
      const res = await UserData(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    // ç»„织架构级联选择器
    async getPrentOrganization() {
      const { data: res } = await PrentOrganization()
      this.Options = res
      this.cascaderOptions = arrayToTree(res, {
        parentProperty: 'parent_id',
        customID: 'torg_code',
        childrenProperty: 'children'
      })
      this.$nextTick(() => {
        this.treeLeft = this.cascaderOptions
        this.$forceUpdate()
      })
    },
    // å²—位 è§’色 ç­ç»„
    async getAllSelectData() {
      const { data: res1 } = await PostPermissions()
      this.postArr = res1

      const { data: res2 } = await RolePermissions()
      this.roleArr = res2

      const { data: res3 } = await GroupsPermissions()
      this.groupArr = res3
    },

    // æŽ’序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getUserData()
    },
    nodeClick(obj, Node, VueComponent) {
      this.form.storgcode = obj.torg_code
      this.getUserData()
    },
    // é‡ç½®
    reset() {
      this.form.usercode = ''
      this.form.username = ''
      this.form.storgcode = ''
      this.$refs.treeLeftRef.setCurrentKey(null)
      this.getUserData()
    },
    // æ–°å¢žæŒ‰é’®
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // ä¿®æ”¹æŒ‰é’®
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'

      // this.cascaderOptions = this.filterChildren(this.cascaderOptions, row.storg_code)
      this.$nextTick(() => {
        this.dialogForm.usercode = row.usercode
        this.dialogForm.username = row.username
        this.dialogForm.password = row.password
        this.dialogForm.mobile = row.mobile
        this.dialogForm.email = row.email
        this.dialogForm.status = row.status
        this.dialogForm.payrate = row.payrate
        this.dialogForm.storg_code = this.findParent([], row.storg_code, this.cascaderOptions).reverse()

        this.dialogForm.post_code = row.post_code ? row.post_code.split(',') : []
        this.dialogForm.role_code = row.role_code ? row.role_code.split(',') : []
        this.dialogForm.group_code = row.group_code ? row.group_code.split(',') : []
      })
    },
    filterChildren(treeData, code) {
      treeData.forEach(item => {
        if (code.split(',').includes(item.torg_code)) {
          item.disabled = true
          if (item.children && item.children.length > 0) {
            this.filterChildren(item.children, item.children.map(it => it.torg_code).join(','))
          }
        } else {
          if (item.children && item.children.length > 0) {
            this.filterChildren(item.children, code)
          }
        }
      })
      return treeData
    },
    // parents:用于返回的数组，childNode:要查询的节点，treeData：json树形数据
    findParent(parents, childNode, treeData) {
      // console.log(parents, childNode, treeData, 2)

      for (let i = 0; i < treeData.length; i++) {
        // çˆ¶èŠ‚点查询条件
        if (treeData[i].torg_code === childNode) {
          // å¦‚果找到结果,保存当前节点
          parents.push(treeData[i].torg_code)
          // ç”¨å½“前节点再去原数据查找当前节点的父节点
          this.findParent(parents, treeData[i].parent_id, this.cascaderOptions)
          break
        } else {
          if (treeData[i].children instanceof Array) {
            //    æ²¡æ‰¾åˆ°ï¼ŒéåŽ†è¯¥èŠ‚点的子节点
            this.findParent(parents, childNode, treeData[i].children)
          }
        }
      }
      return parents
    },
    // åˆ é™¤æŒ‰é’®
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteUserSave({ usercode: row.usercode }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getUserData()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    handleClose() {
      this.dialogForm.usercode = ''
      this.dialogForm.username = ''
      this.dialogForm.status = 'Y'

      this.dialogForm.post_code = []
      this.dialogForm.role_code = []
      this.dialogForm.group_code = []
      this.dialogForm.password = '123456'
      this.dialogForm.mobile = ''
      this.dialogForm.email = ''
      this.dialogForm.payrate = ''

      // this.dialogForm.storg_code = ''

      this.$refs.cascader.checkedValue = ''
      this.$refs.dialogForm.clearValidate()
    },
    // å¯¹è¯æ¡†å–消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // å¯¹è¯æ¡†ç¡®è®¤
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          this.dialogForm.group_code = this.dialogForm.group_code.join(',')
          this.dialogForm.post_code = this.dialogForm.post_code.join(',')
          this.dialogForm.role_code = this.dialogForm.role_code.join(',')
          this.dialogForm.storg_code = this.dialogForm.storg_code[this.dialogForm.storg_code.length - 1]
          AddUpdateUserSave(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getUserData()
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 280
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

 src/views/kanbanManager/cj.vue

@@ -29,7 +29,7 @@
            </div>
            <div
              class="lineContent horn"
              style="height: 870px;display: flex;flex-direction: column;justify-content: space-between"
              style="height: 450px;display: flex;flex-direction: column;justify-content: space-between"
            >
              <el-table
                ref="tableDataLeftCenterRef"
@@ -38,88 +38,77 @@
                style="width: 100%;"
                :header-cell-style="headerCellStyle"
                :cell-style="cellStyle"
                height="920"
                height="500"
              >

                <el-table-column
                  prop="wo_code"
                  label="工单号"
                  width="270"
                  width="220"
                />
                <!--                <el-table-column-->
                <!--                  prop="saleOrderCode"-->
                <!--                  label="生产单号"-->
                <!--                  width="160"-->
                <!--                />-->
                <el-table-column
                  prop="wkshp_name"
                  label="生产车间"
                  width="210"
                />
                <!--                600-->
                <el-table-column
                  prop="partcode"
                  label="产品编码"
                  width="210"
                  width="160"
                />
                <el-table-column
                  prop="partname"
                  label="产品名称"
                  width="210"
                  width="160"
                />
                <!--                <el-table-column-->
                <!--                  prop="partspec"-->
                <!--                  label="产品规格"-->
                <!--                  width="160"-->
                <!--                >-->
                <!--                  <template slot-scope="{row}">-->
                <!--                    {{ row.partspec ? row.partspec : '/' }}-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <el-table-column
                  prop="partspec"
                  label="产品规格"
                  width="160"
                >
                  <template slot-scope="{row}">
                    {{ row.partspec ? row.partspec : '/' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="plan_qty"
                  label="任务数量"
                  width="170"
                  width="120"
                />
                <el-table-column
                  prop="good_qty"
                  label="合格数量"
                  width="170"
                  width="120"
                />
                <!--                <el-table-column-->
                <!--                  prop="ng_qty"-->
                <!--                  label="不良数量"-->
                <!--                  width="120"-->
                <!--                />-->
                <!--                <el-table-column-->
                <!--                  prop="laborbad_qty"-->
                <!--                  label="工废数量"-->
                <!--                  width="120"-->
                <!--                />-->
                <!--                <el-table-column-->
                <!--                  prop="materielbad_qty"-->
                <!--                  label="料废数量"-->
                <!--                  width="120"-->
                <!--                />-->
                <!--                <el-table-column-->
                <!--                  prop="seq"-->
                <!--                  label="工序顺序"-->
                <!--                  width="120"-->
                <!--                />-->
                <!--                <el-table-column-->
                <!--                  prop="step_code"-->
                <!--                  label="工序编码"-->
                <!--                  width="120"-->
                <!--                />-->
                <el-table-column
                  prop="ng_qty"
                  label="不良数量"
                  width="120"
                />
                <el-table-column
                  prop="laborbad_qty"
                  label="工废数量"
                  width="120"
                />
                <el-table-column
                  prop="materielbad_qty"
                  label="料废数量"
                  width="120"
                />
                <el-table-column
                  prop="seq"
                  label="工序顺序"
                  width="120"
                />
                <el-table-column
                  prop="step_code"
                  label="工序编码"
                  width="120"
                />
                <el-table-column
                  prop="step_name"
                  label="工序名称"
                  width="320"
                  width="120"
                />
                <el-table-column
                  prop="schedule"
                  label="完成进度(%)"
                  width="313"
                  width="213"
                />
              </el-table>
            </div>
@@ -127,27 +116,27 @@

        </div>
        <!--        ä¸‹è¾¹-->
        <!--        <div style="display: flex;justify-content: space-between;margin-top: 15px;">-->
        <!--          <div style="width: 1000px;">-->
        <!--            <div class="smallTitle">-->
        <!--              <svg-icon icon-class="blcs" class="svg_class" />-->
        <!--              è´¨é‡ä¸è‰¯(近一周)-->
        <!--            </div>-->
        <!--            <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">-->
        <!--              <div id="cjzl03" class="flex_c_c" style="width: 100%;height:100%" />-->
        <div style="display: flex;justify-content: space-between;margin-top: 15px;">
          <div style="width: 1000px;">
            <div class="smallTitle">
              <svg-icon icon-class="blcs" class="svg_class" />
              è´¨é‡ä¸è‰¯(近一周)
            </div>
            <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
              <div id="cjzl03" class="flex_c_c" style="width: 100%;height:100%" />

        <!--            </div>-->
        <!--          </div>-->
        <!--          <div style="width: 850px;">-->
        <!--            <div class="smallTitle">-->
        <!--              <svg-icon icon-class="ckkc" class="svg_class" />-->
        <!--              ä¸è‰¯ç»Ÿè®¡(近一月)-->
        <!--            </div>-->
        <!--            <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">-->
        <!--              <div id="cjzl04" class="flex_c_c" style="width: 100%;height:100%" />-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
            </div>
          </div>
          <div style="width: 850px;">
            <div class="smallTitle">
              <svg-icon icon-class="ckkc" class="svg_class" />
              ä¸è‰¯ç»Ÿè®¡(近一月)
            </div>
            <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
              <div id="cjzl04" class="flex_c_c" style="width: 100%;height:100%" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@@ -188,10 +177,6 @@

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  created() {
    setInterval(this.getNowTime, 1000)

@@ -201,13 +186,11 @@
    }, 1000 * 60 * 120)
  },
  mounted() {
    // this.getAllApi()
    this.getWorkShopProduceTopData()
    this.getAllApi()
  },
  methods: {
    async getWorkShopProduceTopData() {
      // WorkShopProduceTopData({ wkshopcode: this.wkshopcode.join(',') }).then(res => {
      WorkShopProduceTopData({ wkshopcode: '101,102' }).then(res => {
      WorkShopProduceTopData({ wkshopcode: this.wkshopcode.join(',') }).then(res => {
        this.tableDataCenterTop = res.data

        const divData = this.$refs.tableDataLeftCenterRef.bodyWrapper
@@ -225,7 +208,7 @@
              }
            })
          }
        }, this.tableDataCenterTop.length <= 22 ? 1000 * 30 : 200)
        }, this.tableDataCenterTop.length <= 11 ? 1000 * 15 : 200)
      })
    },

@@ -268,14 +251,14 @@
        })
      }, 1000 * 50)

      const res5 = await WorkShopProduceBottomRightData({ wkshopcode: this.wkshopcode[0] })
      const res5 = await WorkShopProduceBottomRightData({ wkshopcode: this.wkshopcode.join(',') })
      this.RightBottom = res5.data
      if (this.RightBottom.length > 0) {
        loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))
      }

      setInterval(() => {
        WorkShopProduceBottomRightData({ wkshopcode: this.wkshopcode[0] }).then(res5 => {
        WorkShopProduceBottomRightData({ wkshopcode: this.wkshopcode.join(',') }).then(res5 => {
          this.RightBottom = res5.data
          if (this.RightBottom.length > 0) {
            loadEcharts('cjzl04', cjzl04(this.RightBottom.map(i => i.name), this.RightBottom.map(i => i.cont)))
@@ -283,7 +266,7 @@
        })
      }, 1000 * 60)

      await this.getWorkShopProduceTopData()
      this.getWorkShopProduceTopData()
    },

    // èŽ·å–当前时间
@@ -363,10 +346,6 @@
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep .gutter {
  display: none;
}

.all_block01 {

 src/views/kanbanManager/ckgl.vue

@@ -258,7 +258,7 @@
          <div style="height: 470px;">
            <div class="smallTitle">
              <svg-icon icon-class="ph" class="svg_class" />
              åŠæˆå“ã€äº§å“åº“存量排行Top5
              è¿‘一周采购待入库物料排行Top5
            </div>
            <div class="lineContent horn" style="height: 410px">
              <div id="bar03" style="width: 100%;height:100%; " />
@@ -268,7 +268,7 @@
          <div style="height: 470px;margin-top: 30px;">
            <div class="smallTitle">
              <svg-icon icon-class="ph" class="svg_class" />
              åŽŸææ–™åº“存量排行Top5
              è¿‘一周销售已发货产品排行Top5
            </div>
            <div class="lineContent horn" style="height: 410px">
              <div id="bar04" style="width: 100%;height:100%;" />
@@ -286,10 +286,10 @@
import './kbCommon.css'
import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts'
import {
  WareHouseTopLeftData,
  WareHouseTopBottomData,
  WareHouseRightTopData,
  WareHouseRightBottomData
  ProcureOutsourcLeftTop,
  ProductConsignmentLeftBottom,
  ProcureOutsourcRightTop,
  ProductionStockedInRightBottom
} from '@/api/kanbanManager'

export default {
@@ -335,8 +335,8 @@
    window.addEventListener('offline', this.updateOnlineStatus)
    this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })

    this.getWareHouseTopLeftData()
    this.getWareHouseTopBottomData()
    this.getProcureOutsourcLeftTop()
    this.getProductConsignmentLeftBottom()
    this.getEcharts()
  },
  beforeDestroy() {
@@ -367,8 +367,8 @@
      }
    },
    // èŽ·å–左上table数据
    getWareHouseTopLeftData() {
      WareHouseTopLeftData().then(res => {
    getProcureOutsourcLeftTop() {
      ProcureOutsourcLeftTop().then(res => {
        this.tableDataTop = res.data
        // this.number1 = this.tableDataTop.length
        const divData = this.$refs.tableDataTopRef.bodyWrapper
@@ -381,12 +381,12 @@
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // é‡ç½®table距离顶部距离
            divData.scrollTop = 0
            WareHouseTopLeftData().then(res => {
            ProcureOutsourcLeftTop().then(res => {
              this.tableDataTop = res.data
              // this.number1 = this.tableDataTop.length
              if (this.tableDataTop.length > 10) {
                clearInterval(this.tableTopTask)
                this.getWareHouseTopLeftData()
                this.getProcureOutsourcLeftTop()
              }
            })
          }
@@ -394,8 +394,8 @@
      })
    },
    // èŽ·å–左下table数据
    getWareHouseTopBottomData() {
      WareHouseTopBottomData().then(res => {
    getProductConsignmentLeftBottom() {
      ProductConsignmentLeftBottom().then(res => {
        this.tableDataBottom = res.data
        this.number2 = this.tableDataBottom.length
        const divData = this.$refs.tableDataBottomRef.bodyWrapper
@@ -409,12 +409,12 @@
          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
            // é‡ç½®table距离顶部距离
            divData.scrollTop = 0
            WareHouseTopBottomData().then(res => {
            ProductConsignmentLeftBottom().then(res => {
              this.tableDataBottom = res.data
              this.number2 = this.tableDataBottom.length
              if (this.tableDataBottom.length > 10) {
                clearInterval(this.tableBottomTask)
                this.getWareHouseTopBottomData()
                this.getProductConsignmentLeftBottom()
              }
            })
          }
@@ -424,23 +424,23 @@

    // èŽ·å–echarts
    getEcharts() {
      WareHouseRightTopData().then(res => {
        loadEcharts('bar03', bar02(res.data.map(i => i.CanuseBaseQuantity), res.data.map(i => i.materiel_name)))
      ProcureOutsourcRightTop().then(res => {
        loadEcharts('bar03', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
      })

      WareHouseRightBottomData().then(res => {
        loadEcharts('bar04', bar02(res.dat.map(i => i.CanuseBaseQuantity), res.data.map(i => i.materiel_name)))
      ProductionStockedInRightBottom().then(res => {
        loadEcharts('bar04', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
      })

      this.echartsRightTop = setInterval(() => {
        WareHouseRightTopData().then(res => {
          loadEcharts('bar03', bar02(res.data.map(i => i.CanuseBaseQuantity), res.data.map(i => i.materiel_name)))
        ProcureOutsourcRightTop().then(res => {
          loadEcharts('bar03', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
        })
      }, 1000 * 15)

      this.echartsRightBottom = setInterval(() => {
        WareHouseRightBottomData().then(res => {
          loadEcharts('bar04', bar02(res.data.map(i => i.CanuseBaseQuantity), res.data.map(i => i.materiel_name)))
        ProductionStockedInRightBottom().then(res => {
          loadEcharts('bar04', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name)))
        })
      }, 1000 * 15)
    },

 src/views/materialManager/inventoryList.vue

@@ -1,1706 +1,1772 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">



      <div style="display: flex">

        <div style="width: 300px;margin: 10px 10px 0  0;background:#fff">



          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">

            <div style="display: flex;">

              <div

                style="width: 5px;height: 100%;border-radius: 5px;"

                :style="{background:$store.state.settings.theme}"

              />

              <div style="margin-left: 8px;">存货档案</div>

            </div>



            <div style="margin-right:10px">

              <el-tooltip v-del-tab-index class="item" effect="dark" content="新增" placement="top">

                <i class="el-icon-plus" style="cursor: pointer;color: #999" @click="treeAddClick('add')" />

              </el-tooltip>

            </div>



          </div>



          <el-tree

            ref="treeLeftRef"

            style="padding: 10px;overflow: auto"

            :style="{height:(tableHeight+222)+'px'}"

            :data="treeLeft"

            node-key="code"

            highlight-current

            :props="defaultPropsLeft"

            :default-expand-all="true"

            :expand-on-click-node="false"

            @node-click="getTMaterielData"

          >

            <span slot-scope="{ node, data }" class="custom-tree-node">

              <span v-if="!data.isEdit" class="ellipsis" style="width:150px;">{{ data.name }}</span>

              <span v-if="!data.isEdit">

                <el-tooltip v-del-tab-index class="item" effect="dark" content="编辑" placement="top">

                  <i

                    v-if="data.code!=='-1'"

                    class="el-icon-edit"

                    style="margin-right:10px;color: #999"

                    @click.stop="treeEditClick(node,data,'edit')"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i

                    v-if="data.code!=='-1'"

                    class="el-icon-delete"

                    style="margin-right: 4px;color: #999"

                    @click.stop="treeDeleteClick(node,data)"

                  />

                </el-tooltip>

              </span>

            </span>

          </el-tree>

        </div>



        <div

          style=" width:calc(100% - 300px);"

        >

          <div class="bodyTopButtonGroup" style="justify-content: space-between">

            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

            <div style="display: flex">

              <el-button

                v-waves

                type="success"

                icon="el-icon-download"

                @click="$router.push('./../systemSetting/dataImport?fileCode=8')"

              >导入

              </el-button>

              <el-button v-waves icon="el-icon-refresh-right" @click="syncERP">同步存货档案</el-button>

            </div>

          </div>



          <div class="bodyTopFormGroup">

            <el-form

              ref="form"

              :model="form"

              label-width="100px"

              inline

              style="display: flex;"

            >

              <div class="elForm">

                <el-form-item label="存货编码" style=" display: flex;">

                  <el-input v-model="form.partcode" placeholder="请输入" style="width: 200px" />

                </el-form-item>

                <el-form-item label="存货名称" style=" display: flex;">

                  <el-input v-model="form.partname" placeholder="请输入" style="width: 200px" />

                </el-form-item>

                <el-form-item label="存货规格" style=" display: flex;">

                  <el-input v-model="form.partspec" placeholder="请输入" style="width: 200px" />

                </el-form-item>

                <!--                <el-form-item label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

              </div>

              <div

                class="bodySearchReset"

                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

              >

                <el-button

                  v-waves

                  type="primary"

                  icon="el-icon-search"

                  @click="getTMaterielData($refs.treeLeftRef.getCurrentNode())"

                >查询

                </el-button>

                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

              </div>

            </el-form>

            <div

              class="bodyTopFormExpand"

              style="height: 5px;"

            >

              <!--              <svg-icon-->

              <!--                v-show="mouseHoverType==='mouseout'"-->

              <!--                style="cursor: pointer"-->

              <!--                :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

              <!--                @mouseenter="mouseHoverType=$event.type"-->

              <!--              />-->

              <!--              <svg-icon-->

              <!--                v-show="mouseHoverType==='mouseenter'"-->

              <!--                style="cursor: pointer"-->

              <!--                :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

              <!--                @click="isExpandForm=!isExpandForm"-->

              <!--                @mouseout="mouseHoverType=$event.type"-->

              <!--              />-->

            </div>

          </div>



          <div class="elTableDiv">

            <el-table

              ref="tableDataRef"

              class="tableFixed"

              :data="tableData"

              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"

              border

              row-class-name="custom-row"

              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"

              highlight-current-row

              :header-cell-style="this.$headerCellStyle"

              :cell-style="this.$cellStyle"

              @sort-change="sortChange"

            >

              <!--            prop="RowNum"-->

              <el-table-column

                prop="rowNum"

                width="50"

                fixed

                label="序号"

              />

              <el-table-column

                prop="partcode"

                label="存货编码"

                sortable="custom"

                width="110"

              />

              <el-table-column

                prop="partname"

                label="存货名称"

                sortable="custom"

                show-tooltip-when-overflow

                min-width="200"

              />

              <el-table-column

                prop="partspec"

                label="规格型号"

                width="110"

                sortable="custom"

              >

                <template slot-scope="{row}">

                  {{ row.partspec ? row.partspec : '/' }}

                </template>

              </el-table-column>

              <el-table-column

                prop="idinventoryclassname"

                label="所属类别"

                sortable="custom"

                width="110"

              />

              <el-table-column

                label="计量单位"

                width="110"

                sortable="custom"

              >

                <template slot-scope="{row}">

                  {{ row.isSingleUnit === '0' ? row.idunitgroupname : row.idunitname }}

                </template>

              </el-table-column>

              <el-table-column

                prop="status"

                label="存货状态"

                width="110"

                sortable="custom"

              >

                <template slot-scope="{row}">

                  <el-tag v-if="row.status==='0'" size="small" type="success">正常</el-tag>

                  <el-tag v-if="row.status==='1'" size="small" type="danger">停用</el-tag>

                </template>

              </el-table-column>

              <el-table-column

                label="存货属性"

                sortable="custom"

                min-width="220"

              >

                <template slot-scope="{row}">

                  {{ row.isPurchase === '1' ? '外购' : '' }}

                  {{ row.isSale === '1' ? '销售' : '' }}

                  {{ row.isMadeSelf === '1' ? '自制' : '' }}

                  {{ row.isMaterial === '1' ? '生产消耗' : '' }}

                  {{ row.isMadeRequest === '1' ? '委外' : '' }}

                </template>

              </el-table-column>



              <el-table-column

                label="工艺"

                prop=""



                width="110"

              >

                <template slot-scope="{row}">



                  <!--                  <i-->

                  <!--                    v-if="row.is_retdproc==='Y'"-->

                  <!--                    :style="{color:$store.state.settings.theme}"-->

                  <!--                    class="el-icon-share"-->

                  <!--                    style="cursor: pointer"-->

                  <!--                    @click="routeClick(row)"-->

                  <!--                  />-->



                  <i

                    :style="{color:row.is_retdproc==='Y'?$store.state.settings.theme:`rgb(180 ,181, 185)`,cursor: 'pointer'}"

                    class="el-icon-share"

                    @click="mesSetting.route?routeClick(row):routeClick2(row)"

                  />

                </template>

              </el-table-column>



              <!--              <el-table-column-->

              <!--                label="数据来源"-->

              <!--                prop="data_sources"-->

              <!--                sortable="custom"-->

              <!--                width="110"-->

              <!--              />-->

              <el-table-column

                label="创建人员"

                prop="lm_user"

                sortable="custom"

                width="110"

              />

              <el-table-column

                label="创建时间"

                prop="lm_date"

                sortable="custom"

                width="160"

              />



              <el-table-column

                label="操作"

                width="120"

                fixed="right"

              >

                <template slot-scope="{row}">

                  <div class="operationClass">

                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                      <i

                        class="el-icon-edit-outline"

                        :style="{color:$store.state.settings.theme}"

                        @click="edit('edit',row)"

                      />

                    </el-tooltip>

                    <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                      <i

                        class="el-icon-delete"

                        :style="{color:$store.state.settings.theme}"

                        @click="del(row)"

                      />

                    </el-tooltip>

                  </div>

                </template>

              </el-table-column>

            </el-table>

          </div>



          <!--分页-->

          <pagination

            :total="total"

            :page.sync="form.page"

            :limit.sync="form.rows"

            align="right"

            layout="total,prev, pager, next,sizes,jumper"

            popper-class="select_bottom"

            @pagination="getTMaterielData($refs.treeLeftRef.getCurrentNode())"

          />



        </div>

      </div>

    </div>



    <!--    å­˜è´§ç±»åˆ«æ–°å¢žä¿®æ”¹-->

    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogClassVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClassClose"

      @close="handleClassClose"

    >

      <el-form ref="dialogClassForm" inline :rules="dialogClassFormRules" :model="dialogClassForm" label-width="80px">

        <el-form-item label="分类编码" prop="inventoryclasscode">

          <el-input v-model="dialogClassForm.inventoryclasscode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="分类名称" prop="inventoryclassname">

          <el-input v-model="dialogClassForm.inventoryclassname" style="width: 200px" />

        </el-form-item>

        <el-form-item label="上级分类">

          <el-select

            v-model="dialogClassForm.parentcode"

            style="width:200px"

            placeholder="请选择"

            :popper-append-to-body="false"

            clearable

          >

            <el-option

              v-for="item in treeLeftArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

      </el-form>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleClassCancel">取 æ¶ˆ</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleClassConfirm"

          >ç¡® å®š</el-button>

        </div>

      </span>

    </el-dialog>



    <!--    å­˜è´§æ¡£æ¡ˆæ–°å¢žä¿®æ”¹-->

    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="1200px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >



      <el-form ref="dialogForm" class="" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">

        <el-divider content-position="left">基本信息</el-divider>

        <el-form-item label="存货编码" prop="partcode">

          <el-input v-model="dialogForm.partcode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="存货名称" prop="partname">

          <el-input v-model="dialogForm.partname" style="width: 200px" />

        </el-form-item>

        <el-form-item label="规格型号">

          <el-input v-model="dialogForm.partspec" style="width: 200px" />

        </el-form-item>

        <el-form-item label="所属类别" prop="inventoryclasscode">

          <el-select

            v-model="dialogForm.inventoryclasscode"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in treeLeftArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

        <el-form-item label="所属仓库" prop="idwarehouse">

          <el-select

            v-model="dialogForm.idwarehouse"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in idwarehouseArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

        <el-form-item required label="存货状态">

          <el-radio-group v-model="dialogForm.status">

            <el-radio label="0">正常</el-radio>

            <el-radio label="1">停用</el-radio>

          </el-radio-group>

        </el-form-item>



        <el-divider content-position="left">计量单位</el-divider>

        <el-form-item label="计量方式" required prop="unittypcode">

          <el-select

            v-model="dialogForm.unittypcode"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

            @change="unittypcodeChange"

          >

            <el-option

              v-for="item in unittypcodeArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

        <el-form-item :label="dialogForm.unittypcode==='1'? '计量单位':'计量单位组'" prop="unitcode">

          <el-select

            v-if="dialogForm.unittypcode==='1'"

            v-model="dialogForm.unitcode"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

            @change="val=>unitcodeChange(val,'1')"

          >

            <el-option

              v-for="item in unitcodeSingleArr"

              :key="item.unitcode"

              :label="item.unitname"

              :value="item.unitcode"

            />

          </el-select>

          <el-select

            v-if="dialogForm.unittypcode!=='1'"

            v-model="dialogForm.unitcode"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

            @change="val=>unitcodeChange(val,'0')"

          >

            <el-option

              v-for="item in unitcodeGroupArr"

              :key="item.unitcode"

              :label="item.unitname"

              :value="item.unitcode"

            />

          </el-select>

        </el-form-item>

        <el-form-item label="报表辅单位">

          <el-select

            v-model="dialogForm.idSubUnitByReport"

            style="width:200px"

            placeholder="请选择"

            filterable

            :disabled="dialogForm.unittypcode==='1'"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in idSubUnitByReportArr"

              :key="item.unitcode"

              :label="item.unitname"

              :value="item.unitcode"

            />

          </el-select>

        </el-form-item>

        <el-form-item label="库存常用单位">

          <el-select

            v-model="dialogForm.idUnitByStock"

            style="width:200px"

            placeholder="请选择"

            filterable

            :disabled="dialogForm.unittypcode==='1'"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in idUnitBvStockArr"

              :key="item.unitcode"

              :label="item.unitname"

              :value="item.unitcode"

            />

          </el-select>

        </el-form-item>

        <el-form-item label="采购常用单位">

          <el-select

            v-model="dialogForm.idUnitByPurchase"

            style="width:200px"

            placeholder="请选择"

            filterable

            :disabled="dialogForm.unittypcode==='1'"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in idUnitBvStockArr"

              :key="item.unitcode"

              :label="item.unitname"

              :value="item.unitcode"

            />

          </el-select>

        </el-form-item>

        <el-form-item label="销售常用单位">

          <el-select

            v-model="dialogForm.idUnitBySale"

            style="width:200px"

            placeholder="请选择"

            filterable

            :disabled="dialogForm.unittypcode==='1'"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in idUnitBvStockArr"

              :key="item.unitcode"

              :label="item.unitname"

              :value="item.unitcode"

            />

          </el-select>

        </el-form-item>

        <el-form-item label="生产常用单位">

          <el-select

            v-model="dialogForm.idunitbymanufacture"

            style="width:200px"

            placeholder="请选择"

            filterable

            :disabled="dialogForm.unittypcode==='1'"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in idUnitBvStockArr"

              :key="item.unitcode"

              :label="item.unitname"

              :value="item.unitcode"

            />

          </el-select>

        </el-form-item>

        <el-divider content-position="left">存货属性</el-divider>

        <el-checkbox v-model="dialogForm.isPurchase" style="margin-left: 70px;">外购</el-checkbox>

        <el-checkbox v-model="dialogForm.isSale">销售</el-checkbox>

        <el-checkbox v-model="dialogForm.isMadeSelf">自制</el-checkbox>

        <el-checkbox v-model="dialogForm.isMaterial">生产消耗</el-checkbox>

        <el-checkbox v-model="dialogForm.isMadeRequest">委外</el-checkbox>

        <!--        <el-divider content-position="left">存货描述</el-divider>-->

        <!--        <el-form-item label="存货描述">-->

        <!--          <el-input-->

        <!--            v-model="dialogForm.username"-->

        <!--            type="textarea"-->

        <!--            :autosize="{ minRows: 2, maxRows: 4}"-->

        <!--            style="width: 490px;"-->

        <!--          />-->

        <!--        </el-form-item>-->



      </el-form>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >ç¡® å®š</el-button>

        </div>

      </span>

    </el-dialog>



    <!--    å·¥è‰ºè·¯çº¿å¯¹è¯æ¡†-->

    <el-dialog

      v-el-drag-dialog

      :close-on-click-modal="false"

      title="关联工艺路线"

      :visible.sync="dialogVisibleRoute"

      width="800px"

      top="5vh"

      class="dialogVisibleRoute"

      @closed="handleCloseRoute"

      @close="handleCloseRoute"

    >

      <div>

        <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" /> äº§å“åç§°ï¼š{{

          dialogFormRoute.projectName

        }}

      </div>

      <el-divider />

      <div style="margin-bottom: 10px">

        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> å·¥è‰ºè·¯çº¿é›†åˆ

      </div>



      <div class="myCheckboxGroup">

        <div

          v-for="item in dialogFormRoute.routeOperationArr"

          :key="item.code"

          :style="{border:item.isSelected1?'1px solid '+$store.state.settings.theme:'1px solid #eee'}"

          class="myCheckbox"

          @click="myCheckboxClick(item)"

        >

          <!--          <input-->

          <!--            class="myCheckboxInput"-->

          <!--            type="checkbox"-->

          <!--            :value="item.code"-->

          <!--            :name="item.name"-->

          <!--            :style="{color:item.isSelected2?'#42b983':'#fff'}"-->

          <!--            @click="myCheckboxInputClick(item)"-->

          <!--          >{{ item.name }}-->

          <!--            çˆ¶å­ç‚¹å‡»äº‹ä»¶ä¸å½±å“-->

          <!--            onClick="event.cancelBubble = true"-->

          <el-checkbox

            :key="item.code"

            v-model="item.isSelected2"

            class="myCheckboxInput"

            :value="item.code"

            :name="item.name"

            :label="item.name"

            :checked="item.isSelected2"

            @change="myCheckboxInputClick(item)"

          />

          <div class="myCheckboxInputLabel">{{ item.name }}</div>



        </div>

      </div>



      <el-divider />

      <div>

        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> é»˜è®¤å·¥è‰ºè·¯çº¿

      </div>

      <div style="margin-top: 20px">

        <el-select

          v-model="defaultroute_code"

          filterable

          style="width: 200px;"

          placeholder="请选择"

          class="defaultroute_code"

        >

          <el-option

            v-for="item in defaultroute_codeArr"

            :key="item.code"

            :label="item.name"

            :value="item.code"

          />

        </el-select>

      </div>

      <el-divider />

      <div style="margin-bottom: 10px">

        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> å·¥åºåˆ—表

      </div>

      <div style="overflow-y: scroll">

        <el-table

          ref="projectTableData"

          :data="projectTableData"

          border

          height="280"

          :row-class-name="tableRowClassName"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

        >

          <el-table-column

            prop="seq"

            width="100"

            label="工序序号"

            fixed

          />

          <el-table-column

            prop="stepcode"

            show-tooltip-when-overflow

            label="工序编码"

          />

          <el-table-column

            prop="stepname"

            label="工序名称"

            show-tooltip-when-overflow

          />

          <el-table-column

            prop="enable"

            label="启用状态"

            show-tooltip-when-overflow

            fixed="right"

          >

            <template slot-scope="{row}">

              <div v-if="row.enable==='Y'">

                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />

                æ˜¯

              </div>

              <div v-if="row.enable==='N'">

                <i class="el-icon-info" style="margin-right: 2px" />

                å¦

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="routeDialogVisibleCancel">取 æ¶ˆ</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="routeDialogVisibleConfirm"

          >ç¡® å®š</el-button>

        </div>

      </span>

    </el-dialog>



    <!--    æŒ‰å·¥è‰ºèµ°  å·¥åºå¯¹è¯æ¡†-->

    <el-dialog

      v-el-drag-dialog

      :close-on-click-modal="false"

      title="关联工序"

      :visible.sync="dialogVisibleStep"

      width="800px"

      top="15vh"

      class="dialogVisibleStep"

      @closed="handleCloseStep"

      @close="handleCloseStep"

    >



      <div style="display: flex;align-items: center">

        <div style="font-weight: bolder">工序选择：</div>

        <el-drag-select

          v-model="stepSelectedValue"

          style="width:570px;"

          multiple

          placeholder="请选择相对应工序"

        >

          <!--            :disabled="!(dialogForm.mesorderstus==='NEW'||dialogForm.mesorderstus==='ALLO')"-->

          <el-option

            v-for="item in stepSelectArr"

            :key="item.stepcode"

            :label="item.stepname"

            :value="item.stepcode"

          />

        </el-drag-select>

      </div>



      <el-table

        ref="stepTableDataRef"

        :data="stepTableData"

        border

        :row-class-name="tableRowClassName"

        height="300"

        style="width: 100%;margin-top: 15px;"

        highlight-current-row

        :header-cell-style="this.$headerCellStyle"

        :cell-style="this.$cellStyle"

        row-key="stepcode"

      >

        <el-table-column

          type="index"

          label="序号"

          width="50"

        />

        <el-table-column

          prop="stepcode"

          show-tooltip-when-overflow

          label="工序编码"

        />

        <el-table-column

          prop="stepname"

          label="工序名称"

          show-tooltip-when-overflow

        />

        <!--        <el-table-column-->

        <!--          prop="stepprice"-->

        <!--          label="生产单价"-->

        <!--          show-tooltip-when-overflow-->

        <!--        >-->

        <!--          <template slot-scope="{row}">-->

        <!--            <el-input-->

        <!--              v-model="row.stepprice"-->

        <!--              placeholder="请输入工序单价"-->

        <!--              oninput="value=value.replace(/[^0-9.]/g,'')"-->

        <!--              style="width: 100%"-->

        <!--              @click.stop=""-->

        <!--            />-->

        <!--          </template>-->

        <!--        </el-table-column>-->

        <el-table-column

          label="操作"

          width="120"

        >

          <template slot-scope="{row}">

            <div class="operationClass">

              <!--                <el-tooltip class="item" effect="dark" content="移动" placement="top">-->

              <i

                class="el-icon-rank"

                :style="{color:$store.state.settings.theme}"

                style="cursor: move"

              />

              <!--                </el-tooltip>-->

              <!--                @click="edit('edit',row)"-->



              <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                <i

                  class="el-icon-delete"

                  :style="{color:$store.state.settings.theme}"

                  style="margin-left: 15px;"

                  @click="stepDel(row)"

                />

              </el-tooltip>

            </div>

          </template>

        </el-table-column>

      </el-table>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="stepDialogVisibleCancel">取 æ¶ˆ</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="stepDialogVisibleConfirm"

          >ç¡® å®š</el-button>

        </div>

      </span>

    </el-dialog>

  </div>

</template>



<script>

import waves from '@/directive/waves'

import Pagination from '@/components/Pagination'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import {

  SaveTMaterielFile,

  TMaterielAddUpdate,

  TMaterielClassTree,

  TMaterielClassTreeAddUpdate,

  TMaterielClassTreeDelete,

  TMaterielData, TMaterielDelete, TMaterielFileAssociationRoute

} from '@/api/ProductModel'

import arrayToTree from 'array-to-tree'

import { StepData, UnitSerch, WareHouse } from '@/api/GeneralBasicData'

import { SaveSearchMateriel_Info } from '@/api/ErpSyncMes'

import $ from 'jquery'

import Sortable from 'sortablejs'

import ElDragSelect from '@/components/DragSelect'



export default {

  name: 'InventoryList',

  directives: { waves, elDragDialog },

  components: {

    Pagination, ElDragSelect

  },

  data() {

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      operation: '',



      treeLeft: [

        {

          code: '-1',

          name: '全部'

        }

      ], // å·¦ä¾§æ ‘

      treeLeftArr: [],

      defaultPropsLeft: {

        children: 'children',

        label: 'name'

      },



      tableData: [],

      form: {

        inventoryclasscode: '',

        partcode: '',

        partname: '',

        partspec: '',

        page: 1,

        rows: 20,

        prop: 'lm_date', // æŽ’序字段

        order: 'desc' // æŽ’序字段

      },

      total: 0,

      dialogClassVisible: false,

      dialogClassForm: {

        data_sources: '', // æ•°æ®æ¥æº:ERP/MES

        inventoryclasscode: '', // å­˜è´§åˆ†ç±»ç¼–码

        inventoryclassname: '', // å­˜è´§åˆ†ç±»åç§°

        parentcode: '', // ä¸Šçº§åˆ†ç±»ç¼–码

        OperType: ''// OperType

      },

      classArr: [],

      dialogClassFormRules: {

        inventoryclasscode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        inventoryclassname: [

          { required: true, message: '请输存货类型名称', trigger: ['blur', 'change'] }

        ]

      },



      dialogVisible: false,

      dialogForm: {

        data_sources: 'MES', // æ•°æ®æ¥æºï¼›ERP/MES

        partcode: '', // å­˜è´§ç¼–码

        partname: '', // å­˜è´§åç§°

        partspec: '', // è§„格型号

        inventoryclasscode: '', // å­˜è´§ç±»åž‹ç¼–码

        unittypcode: '1', // è®¡é‡æ–¹å¼(0:多计量,1:单计量)

        unitcode: '', // è®¡é‡å•ä½ç¼–码/计量单位组编码

        unitsubcode: '', // è®¡é‡å•ä½ç»„子项编码（对应的是  ä¸»è®¡é‡å•ä½ç¼–码）

        idSubUnitByReport: '', // æŠ¥è¡¨è¾…单位编码

        idUnitByStock: '', // åº“存常用单位编码

        idUnitByPurchase: '', // é‡‡è´­å¸¸ç”¨å•ä½ç¼–码

        idUnitBySale: '', // é”€å”®å¸¸ç”¨å•ä½ç¼–码

        idunitbymanufacture: '', // ç”Ÿäº§å¸¸ç”¨å•ä½

        isPurchase: false, // æ˜¯å¦å¤–è´­: 0(否)1(是)

        isSale: false, // æ˜¯å¦é”€å”®:0(否)1(是)

        isMadeSelf: false, // æ˜¯å¦è‡ªåˆ¶: 0(否)1(是)

        isMaterial: false, // æ˜¯å¦ç”Ÿäº§è€—用: 0(否)1(是)

        isMadeRequest: false, // æ˜¯å¦å§”外，0(否)1(是)

        idwarehouse: '', // ä»“库编码

        status: '0', // ä½¿ç”¨çŠ¶æ€: æ­£å¸¸(0)停用(1)

        OperType: '' // æ“ä½œç±»åž‹

      },

      dialogFormRules: {

        partcode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        partname: [

          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }

        ],

        unitcode: [

          { required: true, message: '请选择计量单位(组)', trigger: ['blur', 'change'] }

        ],

        inventoryclasscode: [

          { required: true, message: '请选择所属单位', trigger: ['blur', 'change'] }

        ]

      },

      unittypcodeArr: [

        { code: '1', name: '单计量' },

        { code: '0', name: '多计量' }

      ],

      unitcodeSingleArr: [],

      unitcodeGroupArr: [],

      idSubUnitByReportArr: [],

      idUnitBvStockArr: [],

      idwarehouseArr: [],



      // å·¥è‰º

      dialogVisibleRoute: false,

      dialogFormRoute: {

        projectName: '', // äº§å“åç§°

        projectCode: '', // äº§å“ä»£ç 

        routeOperationArr: [] // å·¥è‰ºè·¯çº¿é›†åˆ

        // routeOperationSelectedArr: [] // å·¥è‰ºè·¯çº¿é€‰ä¸­é›†åˆæ•°ç»„

      },

      defaultroute_code: '', // é»˜è®¤å·¥è‰ºè·¯çº¿é€‰ä¸­å€¼

      defaultroute_codeArr: '', // é»˜è®¤å·¥è‰ºè·¯çº¿æ•°ç»„

      projectTableData: [], // å·¥åºåˆ—表

      mesSetting: JSON.parse(localStorage.getItem('mesSetting')),



      // æŒ‰å·¥åºèµ°

      dialogVisibleStep: false,

      stepTableData: [],

      sortable: null,

      stepSelectArr: [], // å·¥åºä¸‹æ‹‰æ•°æ®

      stepSelectedValue: [] // å·¥åºä¸‹æ‹‰é€‰ä¸­å€¼

    }

  },

  watch: {

    'stepSelectedValue': {

      // deep: true,

      handler: function(val) {

        // do something with the new and old value of stepSelectedValue

        console.log(val, 1)

        const arr = JSON.parse(JSON.stringify(this.stepTableData))

        const arrStepcode = arr.map(i => i.stepcode)

        this.stepTableData = []

        val.forEach(i => {

          this.stepTableData.push(

            {

              stepcode: i,

              stepname: this.stepSelectArr.find(j => j.stepcode === i).stepname

              // stepprice: arrStepcode.includes(i) ? arr.find(j => j.stepcode === i).stepprice : 0

            }

          )

        })

      }

    }

  },



  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {



  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    this.getTMaterielClassTree()

    this.getSelectApi()

  },

  methods: {

    // å·¥è‰ºç‚¹å‡» ,按工序走

    async routeClick2(row) {

      this.dialogVisibleStep = true

      this.dialogFormRoute.projectCode = row.partcode



      const res = await TMaterielFileAssociationRoute({ partcode: this.dialogFormRoute.projectCode })

      if (res.code === '200' && res.data.length > 0) {

        this.stepSelectedValue = res.data.map(i => i.step_code)

      }



      // æ‹–动表格

      this.$nextTick(() => {

        this.setSort()

      })

    },



    stepDialogVisibleCancel() {

      this.dialogVisibleStep = false

    },



    async stepDialogVisibleConfirm() {

      if (this.stepSelectedValue.length === 0) {

        return this.$message.info('工序至少要有一道！')

      }

      const children = []

      this.stepSelectedValue.forEach((item, index) => {

        const t = this.stepSelectArr.find(i => i.stepcode === item)

        children.push({

          'code': t.stepcode,

          'name': t.stepname,

          'seq': index + 1,

          'isbott': index === 0 ? 'Y' : 'N',

          'isend': index === this.stepSelectedValue.length - 1 ? 'Y' : 'N'

        })

      })

      const data = [

        {

          'partcode': this.dialogFormRoute.projectCode,

          'defaultroute_code': '',

          'children': children

        }

      ]

      this.$store.state.app.buttonIsDisabled = true

      const res = await SaveTMaterielFile(data)

      if (res.code === '200') {

        this.dialogVisibleStep = false

        this.$message.success('保存成功！')

        await this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())

        this.$store.state.app.buttonIsDisabled = false

      }

    },

    // å·¥åºåˆ é™¤

    stepDel(row) {

      const index = this.stepSelectedValue.findIndex(i => i === row.stepcode)

      this.stepSelectedValue.splice(index, 1)

    },

    handleCloseStep() {

      this.stepTableData = []

      this.sortable = null

      this.stepSelectedValue = []

    },



    setSort() {

      const el = this.$refs.stepTableDataRef.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]

      this.sortable = Sortable.create(el, {

        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,

        setData: function(dataTransfer) {

          // to avoid Firefox bug

          // Detail see : https://github.com/RubaXa/Sortable/issues/1012

          dataTransfer.setData('Text', '')

        },

        onEnd: evt => {

          const targetRow = this.stepTableData.splice(evt.oldIndex, 1)[0]

          this.stepTableData.splice(evt.newIndex, 0, targetRow)



          this.stepSelectedValue = this.stepTableData.map(i => i.stepcode)

          // for show the changes, you can delete in you code

          // const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]

          // this.newList.splice(evt.newIndex, 0, tempIndex)

        }

      })

    },



    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    },



    /* ç‚¹å‡»å…³è”工艺路线模块*/

    // å·¥è‰ºè·¯çº¿ç‚¹å‡»

    routeClick(row) {

      const loading = this.$loading({

        lock: true,

        text: '正在加载数据，请稍等...',

        spinner: 'el-icon-loading',

        customClass: 'osloading',

        background: 'rgba(0, 0, 0, 0.7)'

      })



      this.defaultroute_code = row.default_route

      this.dialogFormRoute.projectCode = row.partcode

      this.dialogFormRoute.projectName = row.partname



      TMaterielFileAssociationRoute({ partcode: this.dialogFormRoute.projectCode }).then(res => {

        if (res.code === '200') {

          setTimeout(() => {

            loading.close()

            this.dialogVisibleRoute = true

            this.dialogFormRoute.routeOperationArr = res.data

            // let waitFlag = false// å›žæ˜¾ç­‰å¾…是否放行



            this.dialogFormRoute.routeOperationArr.forEach((item, index) => {

              item.isSelected1 = false

              item.isSelected2 = false

              if (index === 0) {

                item.isSelected1 = true

                this.projectTableData = item.Data

              }

              if (item.flag === 'Y') {

                item.isSelected2 = true

                this.$nextTick(() => {

                  $('input:checkbox').eq(index).prop('checked', true)

                })



                // const interval = setInterval(() => {

                //   if ($('input:checkbox').length > 0) {

                //     waitFlag = true

                //   }

                //   if (waitFlag) {

                //     clearInterval(interval)

                //     this.$nextTick(() => {

                //       $('input:checkbox').eq(index).prop('checked', true)

                //     })

                //   }

                // }, 100)

              }

            })



            this.defaultroute_codeArr = this.dialogFormRoute.routeOperationArr.filter(item => item.flag === 'Y')

          }, 1000)

        } else {

          loading.close()

        }

      })

    },

    // å¯¹è¯æ¡†å…³é—­

    handleCloseRoute() {

      this.dialogFormRoute.routeOperationArr = []

      this.defaultroute_codeArr = []

    },

    // å–消

    routeDialogVisibleCancel() {

      this.dialogVisibleRoute = false

    },

    // ç¡®å®š

    async routeDialogVisibleConfirm() {

      if (!this.defaultroute_code || this.defaultroute_code === 'null') {

        return this.$message.info('默认工艺路线不能为空！')

      }



      // æäº¤æ ¼å¼

      const data = []

      this.dialogFormRoute.routeOperationArr.forEach(item => {

        if (item.isSelected2) {

          data.push({ code: item.code, name: item.name })

        }

      })



      const D = [{

        'partcode': this.dialogFormRoute.projectCode,

        'defaultroute_code': this.defaultroute_code,

        'children': data

      }]



      this.$store.state.app.buttonIsDisabled = true

      const res = await SaveTMaterielFile(D)

      if (res.code === '200') {

        this.dialogVisibleRoute = false

        this.$message.success('保存成功！')

        await this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())

        this.$store.state.app.buttonIsDisabled = false

      }

    },

    // å¤§ç›’子点击事件

    myCheckboxClick(val) {

      console.log(val, 1)

      this.dialogFormRoute.routeOperationArr.forEach(item => {

        item.isSelected1 = val.code === item.code

      })



      this.projectTableData = val.Data

    },

    // å°ç›’子点击事件

    myCheckboxInputClick(val) {

      // console.log(val, 2)

      val.isSelected2 = !!val.isSelected2



      this.dialogFormRoute.routeOperationArr.forEach((item, index) => {

        if (val.code === item.code) {

          item.flag = !item.flag

        }

      })

      if (val.code === this.defaultroute_code) {

        this.defaultroute_code = ''

      }

      this.defaultroute_codeArr = this.dialogFormRoute.routeOperationArr.filter(item => item.isSelected2)

    },



    async getSelectApi() {

      const { data: res } = await UnitSerch({ tunittype: 'M' })

      this.unitcodeGroupArr = res



      const { data: res2 } = await UnitSerch({ tunittype: 'S' })

      this.unitcodeSingleArr = res2



      const { data: res3 } = await WareHouse()

      this.idwarehouseArr = res3



      // èŽ·å–工序

      const { data: res4 } = await StepData()

      this.stepSelectArr = res4

    },



    async getTMaterielClassTree() {

      const res = await TMaterielClassTree()

      res.data.forEach(i => {

        i.idparent = i.idparent ? i.idparent : '-1'

      })

      this.treeLeftArr = res.data

      this.treeLeftArr.forEach(e => {

        e.name = e.code + ' ' + e.name

      })

      this.treeLeft = arrayToTree(this.treeLeft.concat(res.data), {

        parentProperty: 'idparent',

        customID: 'code',

        childrenProperty: 'children'

      })



      this.$nextTick(() => {

        this.$refs.treeLeftRef.setCurrentKey('-1')

        this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())

      })

    },

    async getTMaterielData(node) {

      const result = this.getChildrenCodeMethod(node, [])

      if (result.includes('-1')) {

        result.shift()

      }

      this.form.inventoryclasscode = result.join(',')

      const res = await TMaterielData(this.form)



      this.tableData = res.data

      this.total = res.count

    },



    // èŽ·å–页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 280

        this.$refs.tableDataRef.doLayout()

      })

    },

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())

    },

    // æ–°å¢žæŒ‰é’®

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

    },

    // ä¿®æ”¹æŒ‰é’®

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'



      this.$nextTick(() => {

        this.dialogForm.data_sources = row.data_sources

        this.dialogForm.partcode = row.partcode

        this.dialogForm.partname = row.partname

        this.dialogForm.partspec = row.partspec

        this.dialogForm.inventoryclasscode = row.idinventoryclasscode

        this.dialogForm.unittypcode = row.isSingleUnit

        // è®¡é‡æ–¹å¼(0:多计量,1:单计量)

        if (this.dialogForm.unittypcode === '1') {

          this.dialogForm.unitcode = row.idunitcode

          this.dialogForm.unitsubcode = ''

          this.dialogForm.idSubUnitByReport = ''

          const unitname = this.unitcodeSingleArr.find(i => i.unitcode === this.dialogForm.unitcode).unitname



          this.dialogForm.idUnitByStock = unitname

          this.dialogForm.idUnitByPurchase = unitname

          this.dialogForm.idUnitBySale = unitname

          this.dialogForm.idunitbymanufacture = unitname

        }



        if (this.dialogForm.unittypcode === '0') {

          this.dialogForm.unitcode = row.idunitgroupcode



          const t = this.unitcodeGroupArr.find(i => i.unitcode === this.dialogForm.unitcode).children



          this.idSubUnitByReportArr = t.filter(i => i.isMainUnit !== '1')

          this.idUnitBvStockArr = t



          const mainUnitCode = t.find(i => i.isMainUnit === '1').unitcode

          this.dialogForm.unitsubcode = mainUnitCode

          this.dialogForm.idSubUnitByReport = this.idSubUnitByReportArr[0].unitcode



          this.dialogForm.idUnitByStock = mainUnitCode

          this.dialogForm.idUnitByPurchase = mainUnitCode

          this.dialogForm.idUnitBySale = mainUnitCode

          this.dialogForm.idunitbymanufacture = mainUnitCode

        }



        this.dialogForm.isPurchase = row.isPurchase === '1'

        this.dialogForm.isSale = row.isSale === '1'

        this.dialogForm.isMadeSelf = row.isMadeSelf === '1'

        this.dialogForm.isMaterial = row.isMaterial === '1'

        this.dialogForm.isMadeRequest = row.isMadeRequest === '1'



        this.dialogForm.idwarehouse = row.idwarehousecode

        this.dialogForm.status = row.status

      })

    },

    del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        TMaterielDelete({ partcode: row.partcode, data_sources: row.data_sources }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    reset() {

      this.form.inventoryclasscode = ''

      this.form.partcode = ''

      this.form.partname = ''

      this.form.partspec = ''

      this.$refs.treeLeftRef.setCurrentKey('-1')

      this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())

    },

    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶

    handleClose() {

      this.dialogForm.data_sources = 'MES'

      this.dialogForm.partcode = ''

      this.dialogForm.partname = ''

      this.dialogForm.partspec = ''

      this.dialogForm.inventoryclasscode = ''

      this.dialogForm.unittypcode = '1'

      this.dialogForm.unitcode = ''

      this.dialogForm.unitsubcode = ''

      this.dialogForm.idSubUnitByReport = ''

      this.dialogForm.idUnitByStock = ''

      this.dialogForm.idUnitByPurchase = ''

      this.dialogForm.idUnitBySale = ''

      this.dialogForm.idunitbymanufacture = ''

      this.dialogForm.isPurchase = false

      this.dialogForm.isSale = false

      this.dialogForm.isMadeSelf = false

      this.dialogForm.isMaterial = false

      this.dialogForm.isMadeRequest = false

      this.dialogForm.idwarehouse = ''

      this.dialogForm.status = '0'

      this.$refs.dialogForm.clearValidate()

    },

    // å¯¹è¯æ¡†å–消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // å¯¹è¯æ¡†ç¡®è®¤

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          if (!(this.dialogForm.isPurchase || this.dialogForm.isSale || this.dialogForm.isMadeSelf || this.dialogForm.isMaterial || this.dialogForm.isMadeRequest)) {

            return this.$message.info('存货属性不能为空！')

          }

          this.dialogForm.isPurchase = this.dialogForm.isPurchase ? '1' : '0'

          this.dialogForm.isSale = this.dialogForm.isSale ? '1' : '0'

          this.dialogForm.isMadeSelf = this.dialogForm.isMadeSelf ? '1' : '0'

          this.dialogForm.isMaterial = this.dialogForm.isMaterial ? '1' : '0'

          this.dialogForm.isMadeRequest = this.dialogForm.isMadeRequest ? '1' : '0'

          // console.log(JSON.parse(JSON.stringify(this.dialogForm)), 1)



          if (this.dialogForm.unittypcode === '1') {

            this.dialogForm.idUnitByStock = this.dialogForm.unitcode

            this.dialogForm.idUnitByPurchase = this.dialogForm.unitcode

            this.dialogForm.idUnitBySale = this.dialogForm.unitcode

            this.dialogForm.idunitbymanufacture = this.dialogForm.unitcode

          }

          this.$store.state.app.buttonIsDisabled = true

          TMaterielAddUpdate(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },



    // é€’归取子集的所有code

    getChildrenCodeMethod(node, result) {

      result.push(node.code)

      if (node.children && node.children.length > 0) {

        node.children.forEach(i => {

          this.getChildrenCodeMethod(i, result)

        })

      }

      return result

    },



    treeEditClick(node, data, operation) {

      this.dialogClassForm.data_sources = data.data_sources

      this.dialogClassForm.inventoryclasscode = data.code

      this.dialogClassForm.inventoryclassname = data.name.split(' ')[1]

      this.dialogClassForm.parentcode = data.idparent === '-1' ? '' : data.idparent

      this.dialogClassForm.OperType = 'Update'

      this.operation = operation

      this.dialogClassVisible = true

    },

    treeDeleteClick(node, data) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        const result = this.getChildrenCodeMethod(data, [])

        TMaterielClassTreeDelete({ inventoryclasscode: result.join(',') }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            this.getTMaterielClassTree()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    treeAddClick(operation) {

      this.operation = operation

      this.dialogClassVisible = true

      this.dialogClassForm.OperType = 'Add'

      this.dialogClassForm.data_sources = 'MES'

    },



    handleClassClose() {

      this.dialogClassForm.data_sources = ''

      this.dialogClassForm.inventoryclasscode = ''

      this.dialogClassForm.inventoryclassname = ''

      this.dialogClassForm.parentcode = ''

      this.dialogClassForm.OperType = ''

      this.$refs.dialogClassForm.clearValidate()

    },

    dialogVisibleClassCancel() {

      this.dialogClassVisible = false

    },

    dialogVisibleClassConfirm() {

      this.$refs.dialogClassForm.validate(valid => {

        if (valid) {

          TMaterielClassTreeAddUpdate(this.dialogClassForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogClassVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getTMaterielClassTree()

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    unittypcodeChange(val) {

      console.log(val)



      this.dialogForm.unitcode = ''

      this.dialogForm.unitsubcode = ''

      this.dialogForm.idSubUnitByReport = ''

      this.dialogForm.idUnitByStock = ''

      this.dialogForm.idUnitByPurchase = ''

      this.dialogForm.idUnitBySale = ''

      this.dialogForm.idunitbymanufacture = ''

      // this.$refs.dialogForm.clearValidate()

      // this.$forceUpdate()

    },

    unitcodeChange(val, type) {

      console.log(val)



      if (type === '1') {

        // this.dialogForm.unitcode = val

        this.dialogForm.unitsubcode = ''

        this.dialogForm.idSubUnitByReport = ''



        const unitname = this.unitcodeSingleArr.find(i => i.unitcode === val).unitname



        this.dialogForm.idUnitByStock = unitname

        this.dialogForm.idUnitByPurchase = unitname

        this.dialogForm.idUnitBySale = unitname

        this.dialogForm.idunitbymanufacture = unitname

      }



      if (type === '0') {

        const t = this.unitcodeGroupArr.find(i => i.unitcode === val).children



        this.idSubUnitByReportArr = t.filter(i => i.isMainUnit !== '1')

        this.idUnitBvStockArr = t



        const mainUnitCode = t.find(i => i.isMainUnit === '1').unitcode

        this.dialogForm.unitsubcode = mainUnitCode

        this.dialogForm.idSubUnitByReport = this.idSubUnitByReportArr[0].unitcode



        this.dialogForm.idUnitByStock = mainUnitCode

        this.dialogForm.idUnitByPurchase = mainUnitCode

        this.dialogForm.idUnitBySale = mainUnitCode

        this.dialogForm.idunitbymanufacture = mainUnitCode

      }

    },

    // åŒæ­¥ERP

    syncERP() {

      const loading = this.$loading({

        lock: true,

        text: '正在同步ERP，请稍等...',

        spinner: 'el-icon-loading',

        customClass: 'osloading',

        background: 'rgba(0, 0, 0, 0.7)'

      })



      SaveSearchMateriel_Info().then(res => {

        if (res.code === '200') {

          setTimeout(() => {

            this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())

            this.getTMaterielClassTree()

            loading.close()

            this.$notify.success('同步成功！')

          }, 2000)

        }

        // else if (res.code === '300') {

        //   setTimeout(() => {

        //     loading.close()

        //     this.$message.error('同步失败！')

        //   }, 10000)

        // }

      }).catch(e => {

        loading.close()

      })

    }

  }

}

</script>



<style scoped lang="scss">

$main_color: #42b983;

.custom-tree-node {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 14px;

  padding-right: 8px;

}



//::v-deep .el-checkbox__label {

//  width: 55px;

//}

//

.el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover {

  color: #000 !important;

}



.dialogVisibleRoute {

  .myCheckboxGroup {

    display: flex;

    flex-wrap: wrap;



    .myCheckbox {

      //border: 1px solid $main_color;

      border: 1px solid #eee;

      display: flex;

      min-width: 100px;

      padding: 10px;

      margin: 10px 30px 0 0;

      border-radius: 5px;

      cursor: default;

      position: relative;



      .myCheckboxInput {

        margin: 1px 5px 0 0;

        cursor: pointer;

      }



      .myCheckboxInputLabel {

        position: absolute;

        left: 29px;

        padding: 5px;

        top: 6px;

        color: transparent;

      }



    }



    //.myCheckbox{

    //  border: 1px solid $main_color;

    //}



    input[type=checkbox] {

      cursor: pointer;

      position: relative;

      width: 14px;

      height: 14px;

      font-size: 14px;

    }



    input[type=checkbox]::after {

      position: absolute;

      top: 0;

      //color: rgb(130, 35, 35);

      color: $main_color;

      width: 14px;

      height: 14px;

      display: inline-block;

      visibility: visible;

      padding-left: 0px;

      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;

    }

  }

}



.defaultroute_code ::v-deep .el-input__suffix-inner {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: -3px;

}



::v-deep .el-select__caret {

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

}



</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">

      <div style="display: flex">
        <div style="width: 300px;margin: 10px 10px 0  0;background:#fff">

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="margin-left: 8px;">存货档案</div>
            </div>

            <div style="margin-right:10px">
              <el-tooltip v-del-tab-index class="item" effect="dark" content="新增" placement="top">
                <i class="el-icon-plus" style="cursor: pointer;color: #999" @click="treeAddClick('add')" />
              </el-tooltip>
            </div>

          </div>

          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto"
            :style="{height:(tableHeight+222)+'px'}"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="getTMaterielData"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span v-if="!data.isEdit" class="ellipsis" style="width:150px;">{{ data.name }}</span>
              <span v-if="!data.isEdit">
                <el-tooltip v-del-tab-index class="item" effect="dark" content="编辑" placement="top">
                  <i
                    v-if="data.code!=='-1'"
                    class="el-icon-edit"
                    style="margin-right:10px;color: #999"
                    @click.stop="treeEditClick(node,data,'edit')"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    v-if="data.code!=='-1'"
                    class="el-icon-delete"
                    style="margin-right: 4px;color: #999"
                    @click.stop="treeDeleteClick(node,data)"
                  />
                </el-tooltip>
              </span>
            </span>
          </el-tree>
        </div>

        <div
          style=" width:calc(100% - 300px);"
        >
          <div class="bodyTopButtonGroup" style="justify-content: space-between">
            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
            <div style="display: flex">
              <el-button
                v-waves
                type="success"
                icon="el-icon-download"
                @click="$router.push('./../systemSetting/dataImport?fileCode=8')"
              >导入
              </el-button>
              <el-button v-waves icon="el-icon-refresh-right" @click="syncERP">同步存货档案</el-button>
            </div>
          </div>

          <div class="bodyTopFormGroup">
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              inline
              style="display: flex;"
            >
              <div class="elForm">
                <el-form-item label="存货编码" style=" display: flex;">
                  <el-input v-model="form.partcode" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item label="存货名称" style=" display: flex;">
                  <el-input v-model="form.partname" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item label="存货规格" style=" display: flex;">
                  <el-input v-model="form.partspec" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <!--                <el-form-item label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
              </div>
              <div
                class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
              >
                <el-button
                  v-waves
                  type="primary"
                  icon="el-icon-search"
                  @click="getTMaterielData($refs.treeLeftRef.getCurrentNode())"
                >查询
                </el-button>
                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
              </div>
            </el-form>
            <div
              class="bodyTopFormExpand"
              style="height: 5px;"
            >
              <!--              <svg-icon-->
              <!--                v-show="mouseHoverType==='mouseout'"-->
              <!--                style="cursor: pointer"-->
              <!--                :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
              <!--                @mouseenter="mouseHoverType=$event.type"-->
              <!--              />-->
              <!--              <svg-icon-->
              <!--                v-show="mouseHoverType==='mouseenter'"-->
              <!--                style="cursor: pointer"-->
              <!--                :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
              <!--                @click="isExpandForm=!isExpandForm"-->
              <!--                @mouseout="mouseHoverType=$event.type"-->
              <!--              />-->
            </div>
          </div>

          <div class="elTableDiv">
            <el-table
              ref="tableDataRef"
              class="tableFixed"
              :data="tableData"
              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"
              border
              row-class-name="custom-row"
              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"
              highlight-current-row
              :header-cell-style="this.$headerCellStyle"
              :cell-style="this.$cellStyle"
              @sort-change="sortChange"
            >
              <!--            prop="RowNum"-->
              <el-table-column
                prop="rowNum"
                width="50"
                fixed
                label="序号"
              />
              <el-table-column
                prop="partcode"
                label="存货编码"
                sortable="custom"
                width="110"
              />
              <el-table-column
                prop="partname"
                label="存货名称"
                sortable="custom"
                show-tooltip-when-overflow
                min-width="200"
              />
              <el-table-column
                prop="partspec"
                label="规格型号"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.partspec ? row.partspec : '/' }}
                </template>
              </el-table-column>

              <el-table-column
                prop="priuserdefnvc1"
                label="客户名称"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc1 ? row.priuserdefnvc1 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc6"
                label="客户编码"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc6 ? row.priuserdefnvc6 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc2"
                label="对内名称"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc2 ? row.priuserdefnvc2 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc3"
                label="CTP日期"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc3 ? row.priuserdefnvc3 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc4"
                label="钢刀编号"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc4 ? row.priuserdefnvc4 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc5"
                label="盒型"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc5 ? row.priuserdefnvc5 : '/' }}
                </template>
              </el-table-column>

              <el-table-column
                prop="idinventoryclassname"
                label="所属类别"
                sortable="custom"
                width="110"
              />
              <el-table-column
                label="计量单位"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.isSingleUnit === '0' ? row.idunitgroupname : row.idunitname }}
                </template>
              </el-table-column>
              <el-table-column
                prop="status"
                label="存货状态"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  <el-tag v-if="row.status==='0'" size="small" type="success">正常</el-tag>
                  <el-tag v-if="row.status==='1'" size="small" type="danger">停用</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="存货属性"
                sortable="custom"
                min-width="220"
              >
                <template slot-scope="{row}">
                  {{ row.isPurchase === '1' ? '外购' : '' }}
                  {{ row.isSale === '1' ? '销售' : '' }}
                  {{ row.isMadeSelf === '1' ? '自制' : '' }}
                  {{ row.isMaterial === '1' ? '生产消耗' : '' }}
                  {{ row.isMadeRequest === '1' ? '委外' : '' }}
                </template>
              </el-table-column>

              <el-table-column
                label="工艺"
                prop=""

                width="110"
              >
                <template slot-scope="{row}">

                  <!--                  <i-->
                  <!--                    v-if="row.is_retdproc==='Y'"-->
                  <!--                    :style="{color:$store.state.settings.theme}"-->
                  <!--                    class="el-icon-share"-->
                  <!--                    style="cursor: pointer"-->
                  <!--                    @click="routeClick(row)"-->
                  <!--                  />-->

                  <i
                    :style="{color:row.is_retdproc==='Y'?$store.state.settings.theme:`rgb(180 ,181, 185)`,cursor: 'pointer'}"
                    class="el-icon-share"
                    @click="mesSetting.route?routeClick(row):routeClick2(row)"
                  />
                </template>
              </el-table-column>

              <!--              <el-table-column-->
              <!--                label="数据来源"-->
              <!--                prop="data_sources"-->
              <!--                sortable="custom"-->
              <!--                width="110"-->
              <!--              />-->
              <el-table-column
                label="创建人员"
                prop="lm_user"
                sortable="custom"
                width="110"
              />
              <el-table-column
                label="创建时间"
                prop="lm_date"
                sortable="custom"
                width="160"
              />

              <el-table-column
                label="操作"
                width="120"
                fixed="right"
              >
                <template slot-scope="{row}">
                  <div class="operationClass">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <i
                        class="el-icon-edit-outline"
                        :style="{color:$store.state.settings.theme}"
                        @click="edit('edit',row)"
                      />
                    </el-tooltip>
                    <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                      <i
                        class="el-icon-delete"
                        :style="{color:$store.state.settings.theme}"
                        @click="del(row)"
                      />
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!--分页-->
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes,jumper"
            popper-class="select_bottom"
            @pagination="getTMaterielData($refs.treeLeftRef.getCurrentNode())"
          />

        </div>
      </div>
    </div>

    <!--    å­˜è´§ç±»åˆ«æ–°å¢žä¿®æ”¹-->
    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogClassVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClassClose"
      @close="handleClassClose"
    >
      <el-form ref="dialogClassForm" inline :rules="dialogClassFormRules" :model="dialogClassForm" label-width="80px">
        <el-form-item label="分类编码" prop="inventoryclasscode">
          <el-input v-model="dialogClassForm.inventoryclasscode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="分类名称" prop="inventoryclassname">
          <el-input v-model="dialogClassForm.inventoryclassname" style="width: 200px" />
        </el-form-item>
        <el-form-item label="上级分类">
          <el-select
            v-model="dialogClassForm.parentcode"
            style="width:200px"
            placeholder="请选择"
            :popper-append-to-body="false"
            clearable
          >
            <el-option
              v-for="item in treeLeftArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleClassCancel">取 æ¶ˆ</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleClassConfirm"
          >ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    å­˜è´§æ¡£æ¡ˆæ–°å¢žä¿®æ”¹-->
    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="1200px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >

      <el-form ref="dialogForm" class="" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <el-divider content-position="left">基本信息</el-divider>
        <el-form-item label="存货编码" prop="partcode">
          <el-input v-model="dialogForm.partcode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="存货名称" prop="partname">
          <el-input v-model="dialogForm.partname" style="width: 200px" />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="dialogForm.partspec" style="width: 200px" />
        </el-form-item>
        <el-form-item label="所属类别" prop="inventoryclasscode">
          <el-select
            v-model="dialogForm.inventoryclasscode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in treeLeftArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属仓库" prop="idwarehouse">
          <el-select
            v-model="dialogForm.idwarehouse"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in idwarehouseArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item required label="存货状态">
          <el-radio-group v-model="dialogForm.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-divider content-position="left">计量单位</el-divider>
        <el-form-item label="计量方式" required prop="unittypcode">
          <el-select
            v-model="dialogForm.unittypcode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
            @change="unittypcodeChange"
          >
            <el-option
              v-for="item in unittypcodeArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="dialogForm.unittypcode==='1'? '计量单位':'计量单位组'" prop="unitcode">
          <el-select
            v-if="dialogForm.unittypcode==='1'"
            v-model="dialogForm.unitcode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
            @change="val=>unitcodeChange(val,'1')"
          >
            <el-option
              v-for="item in unitcodeSingleArr"
              :key="item.unitcode"
              :label="item.unitname"
              :value="item.unitcode"
            />
          </el-select>
          <el-select
            v-if="dialogForm.unittypcode!=='1'"
            v-model="dialogForm.unitcode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
            @change="val=>unitcodeChange(val,'0')"
          >
            <el-option
              v-for="item in unitcodeGroupArr"
              :key="item.unitcode"
              :label="item.unitname"
              :value="item.unitcode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="报表辅单位">
          <el-select
            v-model="dialogForm.idSubUnitByReport"
            style="width:200px"
            placeholder="请选择"
            filterable
            :disabled="dialogForm.unittypcode==='1'"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in idSubUnitByReportArr"
              :key="item.unitcode"
              :label="item.unitname"
              :value="item.unitcode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="库存常用单位">
          <el-select
            v-model="dialogForm.idUnitByStock"
            style="width:200px"
            placeholder="请选择"
            filterable
            :disabled="dialogForm.unittypcode==='1'"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in idUnitBvStockArr"
              :key="item.unitcode"
              :label="item.unitname"
              :value="item.unitcode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="采购常用单位">
          <el-select
            v-model="dialogForm.idUnitByPurchase"
            style="width:200px"
            placeholder="请选择"
            filterable
            :disabled="dialogForm.unittypcode==='1'"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in idUnitBvStockArr"
              :key="item.unitcode"
              :label="item.unitname"
              :value="item.unitcode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="销售常用单位">
          <el-select
            v-model="dialogForm.idUnitBySale"
            style="width:200px"
            placeholder="请选择"
            filterable
            :disabled="dialogForm.unittypcode==='1'"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in idUnitBvStockArr"
              :key="item.unitcode"
              :label="item.unitname"
              :value="item.unitcode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生产常用单位">
          <el-select
            v-model="dialogForm.idunitbymanufacture"
            style="width:200px"
            placeholder="请选择"
            filterable
            :disabled="dialogForm.unittypcode==='1'"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in idUnitBvStockArr"
              :key="item.unitcode"
              :label="item.unitname"
              :value="item.unitcode"
            />
          </el-select>
        </el-form-item>
        <el-divider content-position="left">存货属性</el-divider>
        <el-checkbox v-model="dialogForm.isPurchase" style="margin-left: 70px;">外购</el-checkbox>
        <el-checkbox v-model="dialogForm.isSale">销售</el-checkbox>
        <el-checkbox v-model="dialogForm.isMadeSelf">自制</el-checkbox>
        <el-checkbox v-model="dialogForm.isMaterial">生产消耗</el-checkbox>
        <el-checkbox v-model="dialogForm.isMadeRequest">委外</el-checkbox>
        <!--        <el-divider content-position="left">存货描述</el-divider>-->
        <!--        <el-form-item label="存货描述">-->
        <!--          <el-input-->
        <!--            v-model="dialogForm.username"-->
        <!--            type="textarea"-->
        <!--            :autosize="{ minRows: 2, maxRows: 4}"-->
        <!--            style="width: 490px;"-->
        <!--          />-->
        <!--        </el-form-item>-->

      </el-form>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    å·¥è‰ºè·¯çº¿å¯¹è¯æ¡†-->
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      title="关联工艺路线"
      :visible.sync="dialogVisibleRoute"
      width="800px"
      top="5vh"
      class="dialogVisibleRoute"
      @closed="handleCloseRoute"
      @close="handleCloseRoute"
    >
      <div>
        <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" /> äº§å“åç§°ï¼š{{
          dialogFormRoute.projectName
        }}
      </div>
      <el-divider />
      <div style="margin-bottom: 10px">
        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> å·¥è‰ºè·¯çº¿é›†åˆ
      </div>

      <div class="myCheckboxGroup">
        <div
          v-for="item in dialogFormRoute.routeOperationArr"
          :key="item.code"
          :style="{border:item.isSelected1?'1px solid '+$store.state.settings.theme:'1px solid #eee'}"
          class="myCheckbox"
          @click="myCheckboxClick(item)"
        >
          <!--          <input-->
          <!--            class="myCheckboxInput"-->
          <!--            type="checkbox"-->
          <!--            :value="item.code"-->
          <!--            :name="item.name"-->
          <!--            :style="{color:item.isSelected2?'#42b983':'#fff'}"-->
          <!--            @click="myCheckboxInputClick(item)"-->
          <!--          >{{ item.name }}-->
          <!--            çˆ¶å­ç‚¹å‡»äº‹ä»¶ä¸å½±å“-->
          <!--            onClick="event.cancelBubble = true"-->
          <el-checkbox
            :key="item.code"
            v-model="item.isSelected2"
            class="myCheckboxInput"
            :value="item.code"
            :name="item.name"
            :label="item.name"
            :checked="item.isSelected2"
            @change="myCheckboxInputClick(item)"
          />
          <div class="myCheckboxInputLabel">{{ item.name }}</div>

        </div>
      </div>

      <el-divider />
      <div>
        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> é»˜è®¤å·¥è‰ºè·¯çº¿
      </div>
      <div style="margin-top: 20px">
        <el-select
          v-model="defaultroute_code"
          filterable
          style="width: 200px;"
          placeholder="请选择"
          class="defaultroute_code"
        >
          <el-option
            v-for="item in defaultroute_codeArr"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </div>
      <el-divider />
      <div style="margin-bottom: 10px">
        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> å·¥åºåˆ—表
      </div>
      <div style="overflow-y: scroll">
        <el-table
          ref="projectTableData"
          :data="projectTableData"
          border
          height="280"
          :row-class-name="tableRowClassName"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >
          <el-table-column
            prop="seq"
            width="100"
            label="工序序号"
            fixed
          />
          <el-table-column
            prop="stepcode"
            show-tooltip-when-overflow
            label="工序编码"
          />
          <el-table-column
            prop="stepname"
            label="工序名称"
            show-tooltip-when-overflow
          />
          <el-table-column
            prop="enable"
            label="启用状态"
            show-tooltip-when-overflow
            fixed="right"
          >
            <template slot-scope="{row}">
              <div v-if="row.enable==='Y'">
                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
                æ˜¯
              </div>
              <div v-if="row.enable==='N'">
                <i class="el-icon-info" style="margin-right: 2px" />
                å¦
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="routeDialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="routeDialogVisibleConfirm"
          >ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    æŒ‰å·¥è‰ºèµ°  å·¥åºå¯¹è¯æ¡†-->
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      title="关联工序"
      :visible.sync="dialogVisibleStep"
      width="800px"
      top="15vh"
      class="dialogVisibleStep"
      @closed="handleCloseStep"
      @close="handleCloseStep"
    >

      <div style="display: flex;align-items: center">
        <div style="font-weight: bolder">工序选择：</div>
        <el-drag-select
          v-model="stepSelectedValue"
          style="width:570px;"
          multiple
          placeholder="请选择相对应工序"
        >
          <!--            :disabled="!(dialogForm.mesorderstus==='NEW'||dialogForm.mesorderstus==='ALLO')"-->
          <el-option
            v-for="item in stepSelectArr"
            :key="item.stepcode"
            :label="item.stepname"
            :value="item.stepcode"
          />
        </el-drag-select>
      </div>

      <el-table
        ref="stepTableDataRef"
        :data="stepTableData"
        border
        :row-class-name="tableRowClassName"
        height="300"
        style="width: 100%;margin-top: 15px;"
        highlight-current-row
        :header-cell-style="this.$headerCellStyle"
        :cell-style="this.$cellStyle"
        row-key="stepcode"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
        />
        <el-table-column
          prop="stepcode"
          show-tooltip-when-overflow
          label="工序编码"
        />
        <el-table-column
          prop="stepname"
          label="工序名称"
          show-tooltip-when-overflow
        />
        <!--        <el-table-column-->
        <!--          prop="stepprice"-->
        <!--          label="生产单价"-->
        <!--          show-tooltip-when-overflow-->
        <!--        >-->
        <!--          <template slot-scope="{row}">-->
        <!--            <el-input-->
        <!--              v-model="row.stepprice"-->
        <!--              placeholder="请输入工序单价"-->
        <!--              oninput="value=value.replace(/[^0-9.]/g,'')"-->
        <!--              style="width: 100%"-->
        <!--              @click.stop=""-->
        <!--            />-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="{row}">
            <div class="operationClass">
              <!--                <el-tooltip class="item" effect="dark" content="移动" placement="top">-->
              <i
                class="el-icon-rank"
                :style="{color:$store.state.settings.theme}"
                style="cursor: move"
              />
              <!--                </el-tooltip>-->
              <!--                @click="edit('edit',row)"-->

              <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                <i
                  class="el-icon-delete"
                  :style="{color:$store.state.settings.theme}"
                  style="margin-left: 15px;"
                  @click="stepDel(row)"
                />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="stepDialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="stepDialogVisibleConfirm"
          >ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import {
  SaveTMaterielFile,
  TMaterielAddUpdate,
  TMaterielClassTree,
  TMaterielClassTreeAddUpdate,
  TMaterielClassTreeDelete,
  TMaterielData, TMaterielDelete, TMaterielFileAssociationRoute
} from '@/api/ProductModel'
import arrayToTree from 'array-to-tree'
import { StepData, UnitSerch, WareHouse } from '@/api/GeneralBasicData'
import { SaveSearchMateriel_Info } from '@/api/ErpSyncMes'
import $ from 'jquery'
import Sortable from 'sortablejs'
import ElDragSelect from '@/components/DragSelect'

export default {
  name: 'InventoryList',
  directives: { waves, elDragDialog },
  components: {
    Pagination, ElDragSelect
  },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      operation: '',

      treeLeft: [
        {
          code: '-1',
          name: '全部'
        }
      ], // å·¦ä¾§æ ‘
      treeLeftArr: [],
      defaultPropsLeft: {
        children: 'children',
        label: 'name'
      },

      tableData: [],
      form: {
        inventoryclasscode: '',
        partcode: '',
        partname: '',
        partspec: '',
        page: 1,
        rows: 20,
        prop: 'lm_date', // æŽ’序字段
        order: 'desc' // æŽ’序字段
      },
      total: 0,
      dialogClassVisible: false,
      dialogClassForm: {
        data_sources: '', // æ•°æ®æ¥æº:ERP/MES
        inventoryclasscode: '', // å­˜è´§åˆ†ç±»ç¼–码
        inventoryclassname: '', // å­˜è´§åˆ†ç±»åç§°
        parentcode: '', // ä¸Šçº§åˆ†ç±»ç¼–码
        OperType: ''// OperType
      },
      classArr: [],
      dialogClassFormRules: {
        inventoryclasscode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        inventoryclassname: [
          { required: true, message: '请输存货类型名称', trigger: ['blur', 'change'] }
        ]
      },

      dialogVisible: false,
      dialogForm: {
        data_sources: 'MES', // æ•°æ®æ¥æºï¼›ERP/MES
        partcode: '', // å­˜è´§ç¼–码
        partname: '', // å­˜è´§åç§°
        partspec: '', // è§„格型号
        inventoryclasscode: '', // å­˜è´§ç±»åž‹ç¼–码
        unittypcode: '1', // è®¡é‡æ–¹å¼(0:多计量,1:单计量)
        unitcode: '', // è®¡é‡å•ä½ç¼–码/计量单位组编码
        unitsubcode: '', // è®¡é‡å•ä½ç»„子项编码（对应的是  ä¸»è®¡é‡å•ä½ç¼–码）
        idSubUnitByReport: '', // æŠ¥è¡¨è¾…单位编码
        idUnitByStock: '', // åº“存常用单位编码
        idUnitByPurchase: '', // é‡‡è´­å¸¸ç”¨å•ä½ç¼–码
        idUnitBySale: '', // é”€å”®å¸¸ç”¨å•ä½ç¼–码
        idunitbymanufacture: '', // ç”Ÿäº§å¸¸ç”¨å•ä½
        isPurchase: false, // æ˜¯å¦å¤–è´­: 0(否)1(是)
        isSale: false, // æ˜¯å¦é”€å”®:0(否)1(是)
        isMadeSelf: false, // æ˜¯å¦è‡ªåˆ¶: 0(否)1(是)
        isMaterial: false, // æ˜¯å¦ç”Ÿäº§è€—用: 0(否)1(是)
        isMadeRequest: false, // æ˜¯å¦å§”外，0(否)1(是)
        idwarehouse: '', // ä»“库编码
        status: '0', // ä½¿ç”¨çŠ¶æ€: æ­£å¸¸(0)停用(1)
        OperType: '' // æ“ä½œç±»åž‹
      },
      dialogFormRules: {
        partcode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        partname: [
          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }
        ],
        unitcode: [
          { required: true, message: '请选择计量单位(组)', trigger: ['blur', 'change'] }
        ],
        inventoryclasscode: [
          { required: true, message: '请选择所属单位', trigger: ['blur', 'change'] }
        ]
      },
      unittypcodeArr: [
        { code: '1', name: '单计量' },
        { code: '0', name: '多计量' }
      ],
      unitcodeSingleArr: [],
      unitcodeGroupArr: [],
      idSubUnitByReportArr: [],
      idUnitBvStockArr: [],
      idwarehouseArr: [],

      // å·¥è‰º
      dialogVisibleRoute: false,
      dialogFormRoute: {
        projectName: '', // äº§å“åç§°
        projectCode: '', // äº§å“ä»£ç 
        routeOperationArr: [] // å·¥è‰ºè·¯çº¿é›†åˆ
        // routeOperationSelectedArr: [] // å·¥è‰ºè·¯çº¿é€‰ä¸­é›†åˆæ•°ç»„
      },
      defaultroute_code: '', // é»˜è®¤å·¥è‰ºè·¯çº¿é€‰ä¸­å€¼
      defaultroute_codeArr: '', // é»˜è®¤å·¥è‰ºè·¯çº¿æ•°ç»„
      projectTableData: [], // å·¥åºåˆ—表
      mesSetting: JSON.parse(localStorage.getItem('mesSetting')),

      // æŒ‰å·¥åºèµ°
      dialogVisibleStep: false,
      stepTableData: [],
      sortable: null,
      stepSelectArr: [], // å·¥åºä¸‹æ‹‰æ•°æ®
      stepSelectedValue: [] // å·¥åºä¸‹æ‹‰é€‰ä¸­å€¼
    }
  },
  watch: {
    'stepSelectedValue': {
      // deep: true,
      handler: function(val) {
        // do something with the new and old value of stepSelectedValue
        console.log(val, 1)
        const arr = JSON.parse(JSON.stringify(this.stepTableData))
        const arrStepcode = arr.map(i => i.stepcode)
        this.stepTableData = []
        val.forEach(i => {
          this.stepTableData.push(
            {
              stepcode: i,
              stepname: this.stepSelectArr.find(j => j.stepcode === i).stepname
              // stepprice: arrStepcode.includes(i) ? arr.find(j => j.stepcode === i).stepprice : 0
            }
          )
        })
      }
    }
  },

  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.getTMaterielClassTree()
    this.getSelectApi()
  },
  methods: {
    // å·¥è‰ºç‚¹å‡» ,按工序走
    async routeClick2(row) {
      this.dialogVisibleStep = true
      this.dialogFormRoute.projectCode = row.partcode

      const res = await TMaterielFileAssociationRoute({ partcode: this.dialogFormRoute.projectCode })
      if (res.code === '200' && res.data.length > 0) {
        this.stepSelectedValue = res.data.map(i => i.step_code)
      }

      // æ‹–动表格
      this.$nextTick(() => {
        this.setSort()
      })
    },

    stepDialogVisibleCancel() {
      this.dialogVisibleStep = false
    },

    async stepDialogVisibleConfirm() {
      if (this.stepSelectedValue.length === 0) {
        return this.$message.info('工序至少要有一道！')
      }
      const children = []
      this.stepSelectedValue.forEach((item, index) => {
        const t = this.stepSelectArr.find(i => i.stepcode === item)
        children.push({
          'code': t.stepcode,
          'name': t.stepname,
          'seq': index + 1,
          'isbott': index === 0 ? 'Y' : 'N',
          'isend': index === this.stepSelectedValue.length - 1 ? 'Y' : 'N'
        })
      })
      const data = [
        {
          'partcode': this.dialogFormRoute.projectCode,
          'defaultroute_code': '',
          'children': children
        }
      ]
      this.$store.state.app.buttonIsDisabled = true
      const res = await SaveTMaterielFile(data)
      if (res.code === '200') {
        this.dialogVisibleStep = false
        this.$message.success('保存成功！')
        await this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
        this.$store.state.app.buttonIsDisabled = false
      }
    },
    // å·¥åºåˆ é™¤
    stepDel(row) {
      const index = this.stepSelectedValue.findIndex(i => i === row.stepcode)
      this.stepSelectedValue.splice(index, 1)
    },
    handleCloseStep() {
      this.stepTableData = []
      this.sortable = null
      this.stepSelectedValue = []
    },

    setSort() {
      const el = this.$refs.stepTableDataRef.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.stepTableData.splice(evt.oldIndex, 1)[0]
          this.stepTableData.splice(evt.newIndex, 0, targetRow)

          this.stepSelectedValue = this.stepTableData.map(i => i.stepcode)
          // for show the changes, you can delete in you code
          // const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          // this.newList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    },

    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    },

    /* ç‚¹å‡»å…³è”工艺路线模块*/
    // å·¥è‰ºè·¯çº¿ç‚¹å‡»
    routeClick(row) {
      const loading = this.$loading({
        lock: true,
        text: '正在加载数据，请稍等...',
        spinner: 'el-icon-loading',
        customClass: 'osloading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      this.defaultroute_code = row.default_route
      this.dialogFormRoute.projectCode = row.partcode
      this.dialogFormRoute.projectName = row.partname

      TMaterielFileAssociationRoute({ partcode: this.dialogFormRoute.projectCode }).then(res => {
        if (res.code === '200') {
          setTimeout(() => {
            loading.close()
            this.dialogVisibleRoute = true
            this.dialogFormRoute.routeOperationArr = res.data
            // let waitFlag = false// å›žæ˜¾ç­‰å¾…是否放行

            this.dialogFormRoute.routeOperationArr.forEach((item, index) => {
              item.isSelected1 = false
              item.isSelected2 = false
              if (index === 0) {
                item.isSelected1 = true
                this.projectTableData = item.Data
              }
              if (item.flag === 'Y') {
                item.isSelected2 = true
                this.$nextTick(() => {
                  $('input:checkbox').eq(index).prop('checked', true)
                })

                // const interval = setInterval(() => {
                //   if ($('input:checkbox').length > 0) {
                //     waitFlag = true
                //   }
                //   if (waitFlag) {
                //     clearInterval(interval)
                //     this.$nextTick(() => {
                //       $('input:checkbox').eq(index).prop('checked', true)
                //     })
                //   }
                // }, 100)
              }
            })

            this.defaultroute_codeArr = this.dialogFormRoute.routeOperationArr.filter(item => item.flag === 'Y')
          }, 1000)
        } else {
          loading.close()
        }
      })
    },
    // å¯¹è¯æ¡†å…³é—­
    handleCloseRoute() {
      this.dialogFormRoute.routeOperationArr = []
      this.defaultroute_codeArr = []
    },
    // å–消
    routeDialogVisibleCancel() {
      this.dialogVisibleRoute = false
    },
    // ç¡®å®š
    async routeDialogVisibleConfirm() {
      if (!this.defaultroute_code || this.defaultroute_code === 'null') {
        return this.$message.info('默认工艺路线不能为空！')
      }

      // æäº¤æ ¼å¼
      const data = []
      this.dialogFormRoute.routeOperationArr.forEach(item => {
        if (item.isSelected2) {
          data.push({ code: item.code, name: item.name })
        }
      })

      const D = [{
        'partcode': this.dialogFormRoute.projectCode,
        'defaultroute_code': this.defaultroute_code,
        'children': data
      }]

      this.$store.state.app.buttonIsDisabled = true
      const res = await SaveTMaterielFile(D)
      if (res.code === '200') {
        this.dialogVisibleRoute = false
        this.$message.success('保存成功！')
        await this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
        this.$store.state.app.buttonIsDisabled = false
      }
    },
    // å¤§ç›’子点击事件
    myCheckboxClick(val) {
      console.log(val, 1)
      this.dialogFormRoute.routeOperationArr.forEach(item => {
        item.isSelected1 = val.code === item.code
      })

      this.projectTableData = val.Data
    },
    // å°ç›’子点击事件
    myCheckboxInputClick(val) {
      // console.log(val, 2)
      val.isSelected2 = !!val.isSelected2

      this.dialogFormRoute.routeOperationArr.forEach((item, index) => {
        if (val.code === item.code) {
          item.flag = !item.flag
        }
      })
      if (val.code === this.defaultroute_code) {
        this.defaultroute_code = ''
      }
      this.defaultroute_codeArr = this.dialogFormRoute.routeOperationArr.filter(item => item.isSelected2)
    },

    async getSelectApi() {
      const { data: res } = await UnitSerch({ tunittype: 'M' })
      this.unitcodeGroupArr = res

      const { data: res2 } = await UnitSerch({ tunittype: 'S' })
      this.unitcodeSingleArr = res2

      const { data: res3 } = await WareHouse()
      this.idwarehouseArr = res3

      // èŽ·å–工序
      const { data: res4 } = await StepData()
      this.stepSelectArr = res4
    },

    async getTMaterielClassTree() {
      const res = await TMaterielClassTree()
      res.data.forEach(i => {
        i.idparent = i.idparent ? i.idparent : '-1'
      })
      this.treeLeftArr = res.data
      this.treeLeftArr.forEach(e => {
        e.name = e.code + ' ' + e.name
      })
      this.treeLeft = arrayToTree(this.treeLeft.concat(res.data), {
        parentProperty: 'idparent',
        customID: 'code',
        childrenProperty: 'children'
      })

      this.$nextTick(() => {
        this.$refs.treeLeftRef.setCurrentKey('-1')
        this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
      })
    },
    async getTMaterielData(node) {
      const result = this.getChildrenCodeMethod(node, [])
      if (result.includes('-1')) {
        result.shift()
      }
      this.form.inventoryclasscode = result.join(',')
      const res = await TMaterielData(this.form)

      this.tableData = res.data
      this.total = res.count
    },

    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 280
        this.$refs.tableDataRef.doLayout()
      })
    },
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
    },
    // æ–°å¢žæŒ‰é’®
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // ä¿®æ”¹æŒ‰é’®
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'

      this.$nextTick(() => {
        this.dialogForm.data_sources = row.data_sources
        this.dialogForm.partcode = row.partcode
        this.dialogForm.partname = row.partname
        this.dialogForm.partspec = row.partspec
        this.dialogForm.inventoryclasscode = row.idinventoryclasscode
        this.dialogForm.unittypcode = row.isSingleUnit
        // è®¡é‡æ–¹å¼(0:多计量,1:单计量)
        if (this.dialogForm.unittypcode === '1') {
          this.dialogForm.unitcode = row.idunitcode
          this.dialogForm.unitsubcode = ''
          this.dialogForm.idSubUnitByReport = ''
          const unitname = this.unitcodeSingleArr.find(i => i.unitcode === this.dialogForm.unitcode).unitname

          this.dialogForm.idUnitByStock = unitname
          this.dialogForm.idUnitByPurchase = unitname
          this.dialogForm.idUnitBySale = unitname
          this.dialogForm.idunitbymanufacture = unitname
        }

        if (this.dialogForm.unittypcode === '0') {
          this.dialogForm.unitcode = row.idunitgroupcode

          const t = this.unitcodeGroupArr.find(i => i.unitcode === this.dialogForm.unitcode).children

          this.idSubUnitByReportArr = t.filter(i => i.isMainUnit !== '1')
          this.idUnitBvStockArr = t

          const mainUnitCode = t.find(i => i.isMainUnit === '1').unitcode
          this.dialogForm.unitsubcode = mainUnitCode
          this.dialogForm.idSubUnitByReport = this.idSubUnitByReportArr[0].unitcode

          this.dialogForm.idUnitByStock = mainUnitCode
          this.dialogForm.idUnitByPurchase = mainUnitCode
          this.dialogForm.idUnitBySale = mainUnitCode
          this.dialogForm.idunitbymanufacture = mainUnitCode
        }

        this.dialogForm.isPurchase = row.isPurchase === '1'
        this.dialogForm.isSale = row.isSale === '1'
        this.dialogForm.isMadeSelf = row.isMadeSelf === '1'
        this.dialogForm.isMaterial = row.isMaterial === '1'
        this.dialogForm.isMadeRequest = row.isMadeRequest === '1'

        this.dialogForm.idwarehouse = row.idwarehousecode
        this.dialogForm.status = row.status
      })
    },
    del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TMaterielDelete({ partcode: row.partcode, data_sources: row.data_sources }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    reset() {
      this.form.inventoryclasscode = ''
      this.form.partcode = ''
      this.form.partname = ''
      this.form.partspec = ''
      this.$refs.treeLeftRef.setCurrentKey('-1')
      this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
    },
    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    handleClose() {
      this.dialogForm.data_sources = 'MES'
      this.dialogForm.partcode = ''
      this.dialogForm.partname = ''
      this.dialogForm.partspec = ''
      this.dialogForm.inventoryclasscode = ''
      this.dialogForm.unittypcode = '1'
      this.dialogForm.unitcode = ''
      this.dialogForm.unitsubcode = ''
      this.dialogForm.idSubUnitByReport = ''
      this.dialogForm.idUnitByStock = ''
      this.dialogForm.idUnitByPurchase = ''
      this.dialogForm.idUnitBySale = ''
      this.dialogForm.idunitbymanufacture = ''
      this.dialogForm.isPurchase = false
      this.dialogForm.isSale = false
      this.dialogForm.isMadeSelf = false
      this.dialogForm.isMaterial = false
      this.dialogForm.isMadeRequest = false
      this.dialogForm.idwarehouse = ''
      this.dialogForm.status = '0'
      this.$refs.dialogForm.clearValidate()
    },
    // å¯¹è¯æ¡†å–消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // å¯¹è¯æ¡†ç¡®è®¤
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (!(this.dialogForm.isPurchase || this.dialogForm.isSale || this.dialogForm.isMadeSelf || this.dialogForm.isMaterial || this.dialogForm.isMadeRequest)) {
            return this.$message.info('存货属性不能为空！')
          }
          this.dialogForm.isPurchase = this.dialogForm.isPurchase ? '1' : '0'
          this.dialogForm.isSale = this.dialogForm.isSale ? '1' : '0'
          this.dialogForm.isMadeSelf = this.dialogForm.isMadeSelf ? '1' : '0'
          this.dialogForm.isMaterial = this.dialogForm.isMaterial ? '1' : '0'
          this.dialogForm.isMadeRequest = this.dialogForm.isMadeRequest ? '1' : '0'
          // console.log(JSON.parse(JSON.stringify(this.dialogForm)), 1)

          if (this.dialogForm.unittypcode === '1') {
            this.dialogForm.idUnitByStock = this.dialogForm.unitcode
            this.dialogForm.idUnitByPurchase = this.dialogForm.unitcode
            this.dialogForm.idUnitBySale = this.dialogForm.unitcode
            this.dialogForm.idunitbymanufacture = this.dialogForm.unitcode
          }
          this.$store.state.app.buttonIsDisabled = true
          TMaterielAddUpdate(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },

    // é€’归取子集的所有code
    getChildrenCodeMethod(node, result) {
      result.push(node.code)
      if (node.children && node.children.length > 0) {
        node.children.forEach(i => {
          this.getChildrenCodeMethod(i, result)
        })
      }
      return result
    },

    treeEditClick(node, data, operation) {
      this.dialogClassForm.data_sources = data.data_sources
      this.dialogClassForm.inventoryclasscode = data.code
      this.dialogClassForm.inventoryclassname = data.name.split(' ')[1]
      this.dialogClassForm.parentcode = data.idparent === '-1' ? '' : data.idparent
      this.dialogClassForm.OperType = 'Update'
      this.operation = operation
      this.dialogClassVisible = true
    },
    treeDeleteClick(node, data) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const result = this.getChildrenCodeMethod(data, [])
        TMaterielClassTreeDelete({ inventoryclasscode: result.join(',') }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            this.getTMaterielClassTree()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    treeAddClick(operation) {
      this.operation = operation
      this.dialogClassVisible = true
      this.dialogClassForm.OperType = 'Add'
      this.dialogClassForm.data_sources = 'MES'
    },

    handleClassClose() {
      this.dialogClassForm.data_sources = ''
      this.dialogClassForm.inventoryclasscode = ''
      this.dialogClassForm.inventoryclassname = ''
      this.dialogClassForm.parentcode = ''
      this.dialogClassForm.OperType = ''
      this.$refs.dialogClassForm.clearValidate()
    },
    dialogVisibleClassCancel() {
      this.dialogClassVisible = false
    },
    dialogVisibleClassConfirm() {
      this.$refs.dialogClassForm.validate(valid => {
        if (valid) {
          TMaterielClassTreeAddUpdate(this.dialogClassForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogClassVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getTMaterielClassTree()
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    unittypcodeChange(val) {
      console.log(val)

      this.dialogForm.unitcode = ''
      this.dialogForm.unitsubcode = ''
      this.dialogForm.idSubUnitByReport = ''
      this.dialogForm.idUnitByStock = ''
      this.dialogForm.idUnitByPurchase = ''
      this.dialogForm.idUnitBySale = ''
      this.dialogForm.idunitbymanufacture = ''
      // this.$refs.dialogForm.clearValidate()
      // this.$forceUpdate()
    },
    unitcodeChange(val, type) {
      console.log(val)

      if (type === '1') {
        // this.dialogForm.unitcode = val
        this.dialogForm.unitsubcode = ''
        this.dialogForm.idSubUnitByReport = ''

        const unitname = this.unitcodeSingleArr.find(i => i.unitcode === val).unitname

        this.dialogForm.idUnitByStock = unitname
        this.dialogForm.idUnitByPurchase = unitname
        this.dialogForm.idUnitBySale = unitname
        this.dialogForm.idunitbymanufacture = unitname
      }

      if (type === '0') {
        const t = this.unitcodeGroupArr.find(i => i.unitcode === val).children

        this.idSubUnitByReportArr = t.filter(i => i.isMainUnit !== '1')
        this.idUnitBvStockArr = t

        const mainUnitCode = t.find(i => i.isMainUnit === '1').unitcode
        this.dialogForm.unitsubcode = mainUnitCode
        this.dialogForm.idSubUnitByReport = this.idSubUnitByReportArr[0].unitcode

        this.dialogForm.idUnitByStock = mainUnitCode
        this.dialogForm.idUnitByPurchase = mainUnitCode
        this.dialogForm.idUnitBySale = mainUnitCode
        this.dialogForm.idunitbymanufacture = mainUnitCode
      }
    },
    // åŒæ­¥ERP
    syncERP() {
      const loading = this.$loading({
        lock: true,
        text: '正在同步ERP，请稍等...',
        spinner: 'el-icon-loading',
        customClass: 'osloading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      SaveSearchMateriel_Info().then(res => {
        if (res.code === '200') {
          setTimeout(() => {
            this.getTMaterielData(this.$refs.treeLeftRef.getCurrentNode())
            this.getTMaterielClassTree()
            loading.close()
            this.$notify.success('同步成功！')
          }, 2000)
        }
        // else if (res.code === '300') {
        //   setTimeout(() => {
        //     loading.close()
        //     this.$message.error('同步失败！')
        //   }, 10000)
        // }
      }).catch(e => {
        loading.close()
      })
    }
  }
}
</script>

<style scoped lang="scss">
$main_color: #42b983;
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

//::v-deep .el-checkbox__label {
//  width: 55px;
//}
//
.el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover {
  color: #000 !important;
}

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

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

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

      .myCheckboxInputLabel {
        position: absolute;
        left: 29px;
        padding: 5px;
        top: 6px;
        color: transparent;
      }

    }

    //.myCheckbox{
    //  border: 1px solid $main_color;
    //}

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

    input[type=checkbox]::after {
      position: absolute;
      top: 0;
      //color: rgb(130, 35, 35);
      color: $main_color;
      width: 14px;
      height: 14px;
      display: inline-block;
      visibility: visible;
      padding-left: 0px;
      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;
    }
  }
}

.defaultroute_code ::v-deep .el-input__suffix-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -3px;
}

::v-deep .el-select__caret {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

</style>

 src/views/produce/stepReport.vue

@@ -1,1682 +1,1748 @@
<template>

  <div>

    <div class="body" style="padding-top: 10px;" :style="{height:mainHeight+'px'}">



      <div style="position: absolute;right:36px;z-index: 2;top: 13px">

        <el-button

          v-if="activeName==='生产列表'&&tableData.length>0"

          v-waves

          icon="el-icon-thumb"

          type="primary"

          :disabled="radioSelected===''"

          @click="report()"

        >报工

        </el-button>

        <el-button

          v-if="activeName==='外协发料'&&tableData.length>0"

          v-waves

          type="primary"

          icon="el-icon-thumb"

          :disabled="radioSelected===''"

          @click="sendOut()"

        >发料

        </el-button>

        <el-button

          v-if="activeName==='外协收料'&&tableData.length>0"

          v-waves

          type="primary"

          icon="el-icon-thumb"

          :disabled="radioSelected===''"

          @click="takeIn()"

        >收料

        </el-button>

        <el-button

          v-if="activeName==='不良待处理'&&tableData.length>0"

          v-waves

          type="primary"

          icon="el-icon-thumb"

          :disabled="radioSelected===''"

          @click="handleBad()"

        >处理

        </el-button>

      </div>



      <div v-if="form.wocode" style="position: absolute;left: 460px;z-index: 2;top: 23px;font-weight: bolder">

        å½“前工单号为：{{ form.wocode }}

      </div>



      <el-tabs

        ref="elTabs"

        v-model="activeName"

        type="border-card"

        @tab-click="tabClick"

      >



        <el-tab-pane

          v-for="item in elTabsArr"

          :key="item.code"

          :label="item.name"

          :name="item.name"

        >



          <div class="bodyTopFormGroup">

            <el-form

              ref="form"

              :model="form"

              label-width="100px"

              inline

              style="display: flex;"

            >

              <div class="elForm">



                <el-form-item label="工单号" style=" display: flex;">

                  <el-input

                    v-model="workOrderCurrentValue"

                    :name="'produceCode'+item.code"

                    placeholder="请扫描或输入"

                    style="width: 300px"



                    @keyup.enter.native="val=>enterNative(val,'produceCode' + item.code)"

                  />

                </el-form-item>

                <el-form-item label="产品编码" style=" display: flex;">

                  <el-input

                    v-model="form.partcode"

                    placeholder="请输入"

                    style="width: 200px"



                    @keyup.enter.native="val=>enterNative(val,'produceCode' + item.code)"

                  />

                </el-form-item>

                <el-form-item label="产品名称" style=" display: flex;">

                  <el-input

                    v-model="form.partname"

                    placeholder="请输入"



                    style="width: 200px"

                    @keyup.enter.native="val=>enterNative(val,'produceCode' + item.code)"

                  />

                </el-form-item>

                <el-form-item label="车间名称" style=" display: flex;">

                  <el-select

                    v-model="form.wkshopcode"

                    filterable

                    :popper-append-to-body="false"

                    style="width: 200px"



                    placeholder="请选择"

                  >

                    <el-option

                      v-for="item in wkshopcodeArr"

                      :key="item.torg_code"

                      :label="item.torg_name"

                      :value="item.torg_code"

                    />

                  </el-select>

                </el-form-item>



                <!--                <el-form-item label="规格型号" style=" display: flex;">-->

                <!--                  <el-input v-model="form.partspec" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->



              </div>

              <div

                class="bodySearchReset"

                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

              >

                <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>

                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

              </div>

            </el-form>

            <div

              class="bodyTopFormExpand"

              style="height:5px"

            >

              <!--          <svg-icon-->

              <!--            v-show="mouseHoverType==='mouseout'"-->

              <!--            style="cursor: pointer"-->

              <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

              <!--            @mouseenter="mouseHoverType=$event.type"-->

              <!--          />-->

              <!--          <svg-icon-->

              <!--            v-show="mouseHoverType==='mouseenter'"-->

              <!--            style="cursor: pointer"-->

              <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

              <!--            @click="isExpandForm=!isExpandForm"-->

              <!--            @mouseout="mouseHoverType=$event.type"-->

              <!--          />-->

            </div>

          </div>



          <div class="elTableDiv">

            <el-table

              ref="tableDataRef"

              :key="'tableDataRef'+item.code"

              class="tableFixed"

              :data="tableData"

              :height="tableHeight+50"

              border

              row-class-name="custom-row"

              :style="{width: 100+'%',height:tableHeight+'px'}"

              highlight-current-row

              :header-cell-style="headerCellStyle()"

              :cell-style="cellStyle()"

              @sort-change="sortChange"

              @row-click="rowClick"

            >

              <el-table-column

                width="50"

                fixed

              >

                <template slot-scope="{row}">

                  <el-radio

                    v-model="radioSelected"

                    :label="row.id"

                    style="color: transparent;padding-left: 10px;"

                  />

                </template>

              </el-table-column>

              <el-table-column

                prop="rowNum"

                width="50"

                label="序号"

                fixed

              />

              <el-table-column

                v-if="activeName!=='不良待处理'"

                prop="status"

                show-tooltip-when-overflow

                label="状态"

                sortable="custom"

                width="80"

              >

                <template slot-scope="{row}">

                  <div v-if="row.status==='NEW'">新订单</div>

                  <div v-if="row.status==='ALLO'">已派发</div>

                  <div v-if="row.status==='START'">开工</div>

                  <div v-if="row.status==='CLOSED'">完工</div>

                  <div v-if="row.status==='NOSCHED'">待排程</div>

                  <div v-if="row.status==='SCHED'">已排程</div>

                </template>

              </el-table-column>

              <el-table-column

                prop="wo_code"

                label="工单号"

                min-width="160"

                show-tooltip-when-overflow

                sortable="custom"

              />

              <el-table-column

                prop="partcode"

                label="产品编码"

                min-width="110"

                sortable="custom"

                show-tooltip-when-overflow

              />

              <el-table-column

                prop="partname"

                min-width="110"

                show-tooltip-when-overflow

                label="产品名称"

                sortable="custom"

              />

              <el-table-column

                prop="partspec"

                min-width="110"

                show-tooltip-when-overflow

                label="规格型号"

                sortable="custom"

              >

                <template slot-scope="{row}">

                  {{ row.partspec ? row.partspec : '/' }}

                </template>

              </el-table-column>

              <el-table-column

                prop="wkshp_name"

                min-width="110"

                show-tooltip-when-overflow

                label="车间名称"

                sortable="custom"

              />

              <el-table-column

                prop="stepname"

                label="工序名称"

                show-tooltip-when-overflow

                width="120"

                sortable="custom"

              />

              <el-table-column

                prop="plan_qty"

                label="任务数量"

                width="110"

                sortable="custom"

                show-tooltip-when-overflow

              />

              <el-table-column

                v-if="activeName==='外协发料'||activeName==='外协收料'"

                prop="fqty"

                show-tooltip-when-overflow

                label="已发料数量"

                sortable="custom"

                width="120"

              />

              <el-table-column

                prop="good_qty"

                show-tooltip-when-overflow

                :label="activeName==='外协发料'||activeName==='外协收料'?'已收料数量':'合格数量'"

                sortable="custom"

                width="120"

              />

              <el-table-column

                prop="ng_qty"

                label="不良数量"

                show-tooltip-when-overflow

                width="120"

                sortable="custom"

              />

              <el-table-column

                prop="laborbad_qty"

                label="工废数量"

                width="120"

                show-tooltip-when-overflow

                sortable="custom"

              />

              <el-table-column

                prop="materielbad_qty"

                label="料废数量"

                width="120"

                show-tooltip-when-overflow

                sortable="custom"

              />



              <el-table-column

                label="操作"

                width="120"

                fixed="right"

              >

                <template slot-scope="{row}">

                  <div class="operationClass">

                    <el-button v-if="activeName==='生产列表'" v-waves icon="el-icon-thumb" type="text" @click="report(row)">

                      æŠ¥å·¥

                    </el-button>

                    <el-button

                      v-if="activeName==='外协发料'"

                      v-waves

                      icon="el-icon-thumb"

                      type="text"

                      @click="sendOut(row)"

                    >发料

                    </el-button>

                    <el-button v-if="activeName==='外协收料'" v-waves icon="el-icon-thumb" type="text" @click="takeIn(row)">

                      æ”¶æ–™

                    </el-button>

                    <el-button

                      v-if="activeName==='不良待处理'"

                      v-waves

                      icon="el-icon-thumb"

                      type="text"

                      @click="handleBad(row)"

                    >处理

                    </el-button>

                  </div>

                </template>

              </el-table-column>

            </el-table>

          </div>

          <!--分页-->

          <pagination

            :total="total"

            :page.sync="form.page"

            :limit.sync="form.rows"

            align="right"

            layout="total,prev, pager, next,sizes"

            popper-class="select_bottom"

            @pagination="search"

          />

        </el-tab-pane>



      </el-tabs>



    </div>



    <!--    å¼€æŠ¥å·¥ã€å¤–协、不良处理-->

    <el-dialog

      v-el-drag-dialog

      :title="dialogTitle"

      :visible.sync="dialogVisible"

      width="1160px"

      :close-on-click-modal="false"

      :top="activeName==='生产列表'||activeName==='外协收料'? '6vh':'15vh'"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">

        <!--        <el-divider v-if="activeName==='生产列表'||activeName==='外协收料'||activeName==='不良待处理'" content-position="left">基本信息</el-divider>-->

        <el-divider v-if="activeName==='生产列表'" content-position="left">报工信息</el-divider>

        <el-divider v-if="activeName==='外协收料'" content-position="left">收料信息</el-divider>

        <el-divider v-if="activeName==='不良待处理'" content-position="left">待处理信息</el-divider>

        <el-form-item label="工单编号" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.wo_code }}</div>

        </el-form-item>

        <el-form-item label="产品编码" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.partnumber }}</div>

        </el-form-item>

        <el-form-item label="产品名称" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.partname }}</div>

        </el-form-item>

        <el-form-item label="规格型号" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.partspec ? dialogForm.partspec : '/' }}</div>

        </el-form-item>

        <el-form-item label="当前工序" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.stepname }}</div>

        </el-form-item>

        <el-form-item label="下道工序" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.nextstepname ? dialogForm.nextstepname : '/' }}</div>

        </el-form-item>

        <el-form-item label="任务数量" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.planqty }}</div>

        </el-form-item>



        <el-form-item v-if="activeName==='不良待处理'" label="合格数量" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.noreportqty }}</div>

        </el-form-item>

        <el-form-item v-if="activeName==='不良待处理'" label="不良数量" class="dialogFormItem">

          <div class="dialogFormItemDiv">{{ dialogForm.noputqty }}</div>

        </el-form-item>



        <el-form-item

          v-if="activeName!=='不良待处理'"

          :label="activeName==='生产列表'? '未报/已报':(activeName==='外协发料'?'未发/已发':'未收/已收')"

          class="dialogFormItem"

        >

          <div class="dialogFormItemDiv">{{ dialogForm.noreportqty + '/' + dialogForm.reportqty }}</div>

        </el-form-item>



        <el-form-item v-if="activeName==='生产列表'||activeName==='外协收料'" label="不良数量" class="dialogFormItem">

          <div class="dialogFormItemDiv" style="color:red;">{{ dialogForm.noputqty }}</div>

        </el-form-item>



        <el-form-item v-if="activeName==='生产列表'" label="报工设备" class="dialogFormItem">

          <el-select

            v-model="dialogForm.eqpcode"

            style="width:200px"

            placeholder="请选择"

            filterable

            clearable

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in eqpArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>



        <el-form-item v-if="activeName==='生产列表'" label="计件方式" class="dialogFormItem">

          <el-radio-group

            v-model="dialogForm.reckway"

            style="width: 200px;"

            @change="reckwayChange"

          >

            <el-radio label="person">个人</el-radio>

            <el-radio label="group">班组</el-radio>

          </el-radio-group>

        </el-form-item>



        <el-form-item

          v-if="activeName==='生产列表'"

          :prop="dialogForm.reckway==='group'?'usergroupcode':''"

          label="报工班组"

          class="dialogFormItem"

        >

          <el-select

            v-model="dialogForm.usergroupcode"

            style="width:200px"

            placeholder="请选择"

            filterable

            :disabled="dialogForm.reckway!=='group'"

            :popper-append-to-body="false"

            @change="usergroupChange"

          >

            <el-option

              v-for="item in usergroupArr"

              :key="item.usergroupcode"

              :label="item.usergroupname"

              :value="item.usergroupcode"

            />

          </el-select>

        </el-form-item>

        <el-form-item v-if="activeName==='生产列表'" prop="reportuser" label="报工人员" class="dialogFormItem">

          <el-select

            v-model="dialogForm.reportuser"

            style="width:200px"

            placeholder="请选择"

            filterable

            multiple

            collapse-tags

            :multiple-limit="dialogForm.reckway==='group'?0:1"

            :disabled="dialogForm.reckway==='group'&&dialogForm.usergroupcode===''"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in reportuserArr"

              :key="item.usercode"

              :label="item.username"

              :value="item.usercode"

            />

          </el-select>

        </el-form-item>

        <el-form-item v-if="activeName==='生产列表'" prop="startqty" label="合格数量" class="dialogFormItem">

          <el-input v-model="dialogForm.startqty" oninput="value=value.replace(/[^\d]/g,'')" style="width: 200px" />

        </el-form-item>



        <el-form-item v-if="activeName==='外协发料'||activeName==='外协收料'" prop="wxcode" label="外协供方" class="dialogFormItem">

          <el-select

            v-model="dialogForm.wxcode"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in wxArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

        <el-form-item v-if="activeName==='外协发料'" prop="outuser" label="发料人员" class="dialogFormItem">

          <el-select

            v-model="dialogForm.outuser"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in reportuserArr"

              :key="item.usercode"

              :label="item.username"

              :value="item.usercode"

            />

          </el-select>

        </el-form-item>

        <el-form-item v-if="activeName==='外协发料'" prop="fqty" label="发料数量" class="dialogFormItem">

          <el-input v-model="dialogForm.fqty" oninput="value=value.replace(/[^\d]/g,'')" style="width: 200px" />

        </el-form-item>



        <el-form-item v-if="activeName==='外协收料'" prop="inuser" label="收料人员" class="dialogFormItem">

          <el-select

            v-model="dialogForm.inuser"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in reportuserArr"

              :key="item.usercode"

              :label="item.username"

              :value="item.usercode"

            />

          </el-select>

        </el-form-item>

        <el-form-item v-if="activeName==='外协收料'" prop="sqty" label="收料数量" class="dialogFormItem">

          <el-input v-model="dialogForm.sqty" oninput="value=value.replace(/[^\d]/g,'')" style="width: 200px" />

        </el-form-item>



        <el-divider v-if="activeName==='生产列表'||activeName==='外协收料'" content-position="left">不良明细信息</el-divider>

        <el-button

          v-if="activeName==='生产列表'||activeName==='外协收料'"

          v-waves

          type="primary"

          icon="el-icon-circle-plus-outline"

          @click="addDefect"

        >新增

        </el-button>

        <el-table

          v-if="activeName==='生产列表'||activeName==='外协收料'"

          ref="defectTableDataRef"

          key="defectTableDataKey"

          :data="defectTableData"

          border

          row-class-name="custom-row"

          height="200"

          style="width: 100%;margin-top: 15px;"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

        >

          <el-table-column

            type="index"

            label="序号"

            align="center"

            width="50"

          />

          <el-table-column

            prop="stepcode"

            label="缺陷编码/名称"

            align="center"

            min-width="450"

          >

            <template slot-scope="{row}">

              <el-select

                v-model="row.code"

                style="width: 100%"

                placeholder="请选择"

                multiple

                filterable

              >

                <!--                collapse-tags-->

                <el-option

                  v-for="item in defectArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </template>

          </el-table-column>



          <el-table-column

            prop="badqty"

            label="不良数量"

            align="center"

          >

            <template slot-scope="{row}">

              <el-input

                v-model="row.badqty"

                placeholder="请输入数量"

                oninput="value=value.replace(/[^0-9]/g,'')"

                style="width: 100%"

                @click.stop=""

                @change="badqtyChange"

              />

            </template>

          </el-table-column>

          <el-table-column

            label="操作"

            width="50"

            align="center"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i

                    class="el-icon-delete"

                    :style="{color:$store.state.settings.theme}"

                    style="margin-left: 7px;"

                    @click="defectDel(row)"

                  />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>



        <el-divider v-if="activeName==='外协收料'" content-position="left">可收料供应商</el-divider>

        <div

          v-for="(item,index) in dialogForm.list"

          v-if="item.fqty>0"

          :key="item.name"

          style="display: flex;line-height: 26px;height: 26px;margin-left:30px;align-items: center"

        >

          <div

            style="color: #fff;width: 22px;height: 22px;display: flex;justify-content: center;align-items: center;border-radius: 50%"

            :style="{backgroundColor:$store.state.settings.theme}"

          >{{ index + 1 }}

          </div>

          <div style="margin-left:30px;width: 160px;" class="ellipsis">

            {{ item.tp }}

          </div>

          <div style="margin-left:30px;">

            å¯æ”¶æ•°é‡ï¼š{{ item.acceptQty }}

          </div>

        </div>



        <el-divider v-if="activeName==='不良待处理'" content-position="left">不良信息明细</el-divider>

        <el-table

          v-if="activeName==='不良待处理'"

          ref="badTableDataDataRef"

          key="badTableDataDataKey"

          :data="badTableData"

          border

          row-class-name="custom-row"

          height="300"

          style="width: 100%;margin-top: 15px;"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

        >

          <el-table-column

            type="index"

            label="序号"

            align="center"

            width="50"

          />

          <!--          <el-table-column-->

          <!--            prop="step_code"-->

          <!--            label="工序编码"-->

          <!--            show-tooltip-when-overflow-->

          <!--            align="center"-->

          <!--          />-->

          <el-table-column

            prop="stepname"

            label="工序名称"

            show-tooltip-when-overflow

            align="center"

          />

          <el-table-column

            prop="plan_qty"

            label="任务数量"

            show-tooltip-when-overflow

            align="center"

          />

          <el-table-column

            prop="report_qty"

            label="合格数量"

            show-tooltip-when-overflow

            align="center"

          />

          <el-table-column

            prop="ng_qty"

            label="不良数量"

            show-tooltip-when-overflow

            align="center"

          />

          <el-table-column

            prop="defect_name"

            label="不良原因"

            show-tooltip-when-overflow

            align="center"

          />

          <el-table-column

            prop="repair_qty"

            label="维修合格数量"

            align="center"

          >

            <template slot-scope="{row}">

              <el-input

                v-model="row.repair_qty"

                placeholder="请输入数量"

                oninput="value=value.replace(/[^0-9]/g,'')"

                style="width: 100%"

                @click.stop=""

              />

            </template>

          </el-table-column>

          <el-table-column

            prop="laborbad_qty"

            label="工废数量"

            align="center"

          >

            <template slot-scope="{row}">

              <el-input

                v-model="row.laborbad_qty"

                placeholder="请输入数量"

                oninput="value=value.replace(/[^0-9]/g,'')"

                style="width: 100%"

                @click.stop=""

              />

            </template>

          </el-table-column>

          <el-table-column

            prop="materielbad_qty"

            label="料废数量"

            align="center"

          >

            <template slot-scope="{row}">

              <el-input

                v-model="row.materielbad_qty"

                placeholder="请输入数量"

                oninput="value=value.replace(/[^0-9]/g,'')"

                style="width: 100%"

                @click.stop=""

              />

            </template>

          </el-table-column>



          <!--          <el-table-column-->

          <!--            prop="badqty"-->

          <!--            label="不良数量"-->

          <!--            show-tooltip-when-overflow-->

          <!--            align="center"-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <el-input-->

          <!--                v-model="row.badqty"-->

          <!--                placeholder="请输入数量"-->

          <!--                oninput="value=value.replace(/[^0-9]/g,'')"-->

          <!--                style="width: 100%"-->

          <!--                @click.stop=""-->

          <!--                @change="badqtyChange"-->

          <!--              />-->

          <!--            </template>-->

          <!--          </el-table-column>-->



          <!--          <el-table-column-->

          <!--            label="操作"-->

          <!--            width="50"-->

          <!--            align="center"-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <div class="operationClass">-->

          <!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->

          <!--                  <i-->

          <!--                    class="el-icon-delete"-->

          <!--                    :style="{color:$store.state.settings.theme}"-->

          <!--                    style="margin-left: 7px;"-->

          <!--                    @click="defectDel(row)"-->

          <!--                  />-->

          <!--                </el-tooltip>-->

          <!--              </div>-->

          <!--            </template>-->

          <!--          </el-table-column>-->



        </el-table>

      </el-form>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >ç¡® å®š</el-button>

        </div>

      </span>

    </el-dialog>



    <!--    æµè½¬å°æ ‡ç­¾æ‰“印-->

    <!--打印预览页面  å°æ ‡ç­¾-->

    <el-dialog

      v-el-drag-dialog

      title="预览"

      :visible.sync="dialogVisible2"

      width="1140"

      top="10vh"

      :close-on-click-modal="false"

      @close="dialogVisible2Close"

    >

      <!-- è¦æ‰“印的区域 -->

      <div id="printMe2" style="padding: 30px;">

        <div

          style="display: flex;width: 280px;height: 150px;border: 1px solid #000;text-align: center;font-size: 10px;"

        >



          <div style="width: 90px;display: flex;flex-direction: column;border-right: 1px solid #000">

            <div

              style="display: flex;height: 90px;border-bottom:1px solid #000;

              justify-content: center;align-items: center;position: relative"

            >

              <div id="qrCode2" ref="qrCodeDiv2" style="overflow-y: hidden;height:60px;position: absolute;left: 14px;" />

            </div>

            <div

              style="display: flex;height: 30px;justify-content: flex-start;border-bottom:1px solid #000;align-items: center"

            >

              <div style="margin-left: 5px;width: 28px">数量:</div>

              {{ qrForm.startqty }}

            </div>

            <div style="display: flex;height: 30px;justify-content: flex-start;align-items: center">

              <div style="margin-left: 5px;width: 42px">处理人:</div>

              {{ qrForm.operator }}

            </div>

          </div>



          <div style="width:190px;display: flex;flex-direction: column">

            <div

              style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center;text-align: left"

            >

              <div style="width: 60px;margin-left: 5px;">工单编号:</div>

              <div>{{ qrForm.wo_code }}</div>

            </div>

            <div

              style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center ;text-align: left"

            >

              <div style="width: 60px;margin-left: 5px;">产品编码:</div>

              <div>{{ qrForm.partcode }}</div>

            </div>

            <div

              style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"

            >

              <div style="width:60px;margin-left: 5px;">产品名称:</div>

              <div>{{ qrForm.partname }}</div>

            </div>

            <div

              style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"

            >

              <div style="width:60px;margin-left: 5px;">{{ qrForm.nextstepname?'下道工序':'产品规格' }}:</div>

              <div>{{ qrForm.nextstepname?qrForm.nextstepname:qrForm.partspec?qrForm.partspec:'/' }}</div>

            </div>

            <div style="display: flex;height: 20%;justify-content: flex-start;align-items: center;text-align: left">

              <div style="width: 60px;margin-left: 5px;">处理时间:</div>

              <div>{{ qrForm.operatorTime }}</div>

            </div>



          </div>



        </div>

      </div>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisible2 = false">取 æ¶ˆ</el-button>

          <el-button v-waves v-print="printObj2" type="primary">ç¡® å®š</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import $ from 'jquery'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import {

  EditOrderNgStepSeave,

  MesOrderNgStepSearch,

  MesOrderNgSubStepSearch,

  MesOrderStepSearch, MesOrderStepStart,

  MesOrderWxStepSearch, SavaMesOrderStepIn, SavaMesOrderStepOut, SavaMesOrderStepReport

} from '@/api/WorkOrder'

import {

  CustomerPermissions,

  DefectPermissions,

  EqpPermissions,

  GroupsPermissions,

  GroupsPersonPermissions,

  PersonPermissions, PrentOrganizationNoCompany

} from '@/api/GeneralBasicData'

import { nanoid } from 'nanoid'

import { LabelBarCode } from '@/api/systemSetting'

import { getCookie } from '@/utils/auth'

import { handleDatetime2 } from '@/utils/global'

import QRCode from 'qrcodejs2'

export default {

  name: 'StepReport',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,

      form: {

        wkshopcode: '',

        wocode: '', // å·¥å•å·

        partcode: '', // äº§å“ç¼–码

        partname: '', // äº§å“åç§°

        partspec: '', // äº§å“è§„æ ¼

        prop: 'lm_date', // æŽ’序字段

        order: 'desc', // æŽ’序字段

        page: 1, // ç¬¬å‡ é¡µ

        rows: 20 // æ¯é¡µå¤šå°‘条

      },

      wkshopcodeArr: [],

      total: 10,

      tableData: [],

      activeName: '生产列表',

      elTabsArr: [

        { code: 'ZZ', name: '生产列表' },

        { code: 'OUT', name: '外协发料' },

        { code: 'IN', name: '外协收料' },

        { code: 'BAD', name: '不良待处理' }

      ],



      radioSelected: '', // å¤šé€‰æ¡†é€‰ä¸­å€¼



      dialogVisible: false,

      dialogTitle: '', // å¯¹è¯æ¡†å°æ ‡é¢˜



      dialogForm: {

        'wo_code': '',

        'partnumber': '',

        'partname': '',

        'partspec': '',

        'seq': '',

        'stepcode': '',

        'stepname': '',

        'stepprice': '', // å·¥åºå•ä»·

        'nextstepcode': '',

        'nextstepname': '',

        'nextstepprice': '',

        'stepdesc': '',

        'planqty': 0,

        'startqty': 0, //

        'noreportqty': 0, // æœªæŠ¥æ•°é‡

        'reportqty': 0, // å·²æŠ¥æ•°é‡

        'noputqty': 0, // ä¸è‰¯æ•°é‡

        'wkshopcode': '',

        'wkshopname': '',

        'eqpcode': '',

        'eqpname': '',



        remarks: '', // å¤‡æ³¨

        inbarcode: '', // å…¥åº“条码

        defectlist: '', // ä¸è‰¯æ±‡æ€»

        reckway: 'person', // è®¡ä»¶æ–¹å¼(班组:group、个人:person)

        usergroupcode: '', // ç­ç»„编码

        reportuser: [], // æŠ¥å·¥äººå‘˜



        wxcode: '',

        outuser: '',

        fqty: '',

        inuser: '',

        sqty: '',

        list: ''



      },

      dialogFormRules: {

        eqpcode: [

          { required: true, message: '请选择报工设备', trigger: ['blur', 'change'] }

        ],

        usergroupcode: [

          { required: true, message: '请选择报工班组', trigger: ['blur', 'change'] }

        ],

        reportuser: [

          { required: true, message: '请选择报工人员', trigger: ['blur', 'change'] }

        ],

        startqty: [

          { required: true, message: '请输入合格数量', trigger: ['blur', 'change'] }

        ],

        wxcode: [

          { required: true, message: '请选择外协供方', trigger: ['blur', 'change'] }

        ],

        outuser: [

          { required: true, message: '请选择发料人员', trigger: ['blur', 'change'] }

        ],

        inuser: [

          { required: true, message: '请选择收料人员', trigger: ['blur', 'change'] }

        ],

        fqty: [

          { required: true, message: '请输入发料数量', trigger: ['blur', 'change'] }

        ],

        sqty: [

          { required: true, message: '请输入收料数量', trigger: ['blur', 'change'] }

        ]



      },

      reckwayArr: [// æŠ¥å·¥ç±»åž‹

        { code: 'group', name: '班组' },

        { code: 'person', name: '个人' }

      ],

      reportuserArr: [], // æŠ¥å·¥äººå‘˜

      usergroupArr: [], // æŠ¥å·¥ç­ç»„

      eqpArr: [], // æŠ¥å·¥è®¾å¤‡

      defectArr: [], // ä¸è‰¯ç¼ºé™·

      wxArr: [], // å¾€æ¥å•ä½ä¸‹æ‹‰



      defectTableData: [],

      badTableData: [],

      workOrderCurrentValue: '',



      dialogVisible2: false, //

      qrForm: { // æ‰“印内容

        qrvalue: '',

        startqty: '',

        wo_code: '',

        partcode: '',

        partname: '',

        partspec: '',

        nextstepname: '',

        operator: '', // æ“ä½œäºº

        operatorTime: ''// æ“ä½œæ—¶é—´

      },

      printObj2: {

        id: 'printMe2',

        popTitle: '打印模板',

        preview: false,

        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',

        closeCallback(vue) { // å…³é—­æ‰“印的回调事件（无法确定点击的是确认还是取消）

          console.log('11212', vue)

          // vue.dialogVisible = false

          vue.dialogVisible2 = false

          vue.dialogVisible = false

        },

        beforeOpenCallback(vue) {

          vue.printLoading = true

          console.log('打开之前')

        },

        openCallback(vue) {

          vue.printLoading = false

          console.log('执行了打印')

        }

      },

      xx: ''

    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {



  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    this.tabClick()



    this.getAllSelectArr()

  },

  methods: {



    async getAllSelectArr() {

      const { data: res1 } = await GroupsPermissions()// ç­ç»„

      this.usergroupArr = res1



      const { data: res2 } = await PersonPermissions() // äººå‘˜

      this.reportuserArr = res2



      const { data: res3 } = await DefectPermissions() // ç¼ºé™·

      this.defectArr = res3



      const { data: res4 } = await EqpPermissions() // è®¾å¤‡

      this.eqpArr = res4



      const { data: res5 } = await CustomerPermissions() // å¾€æ¥å•ä½

      this.wxArr = res5



      const { data: res6 } = await PrentOrganizationNoCompany()// æ— å…¬å¸çš„组织下拉

      this.wkshopcodeArr = res6

    },

    tabClick() {

      let belong

      switch (this.activeName) {

        case '生产列表':

          belong = 'produceCodeZZ'

          this.dialogTitle = '报工'

          break

        case '外协发料':

          belong = 'produceCodeOUT'

          this.dialogTitle = '发料'

          break

        case '外协收料':

          belong = 'produceCodeIN'

          this.dialogTitle = '收料'

          break

        case '不良待处理':

          belong = 'produceCodeBAD'

          this.dialogTitle = '不良处理'

          break

      }

      this.enterNative(this.form.wocode, belong)



      this.radioSelected = ''

    },

    enterNative(val, belong) {

      if (belong === 'produceCodeZZ') {

        this.$nextTick(() => {

          $('input[name=\'produceCodeZZ\']')[0].focus()

        })

      }

      if (belong === 'produceCodeOUT') {

        this.$nextTick(() => {

          $('input[name=\'produceCodeOUT\']')[0].focus()

        })

      }

      if (belong === 'produceCodeIN') {

        this.$nextTick(() => {

          $('input[name=\'produceCodeIN\']')[0].focus()

        })

      }

      if (belong === 'produceCodeBAD') {

        this.$nextTick(() => {

          $('input[name=\'produceCodeBAD\']')[0].focus()

        })

      }

      this.search()

    },

    // æŽ’序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.search()

    },

    // æŸ¥è¯¢

    async search() {

      this.form.wocode = this.workOrderCurrentValue

      this.workOrderCurrentValue = ''

      if (this.activeName === '生产列表') {

        const res = await MesOrderStepSearch(this.form)

        this.tableData = res.data

        this.total = res.count

      }

      if (this.activeName === '外协发料' || this.activeName === '外协收料') {

        const res = await MesOrderWxStepSearch(this.form)

        this.tableData = res.data

        this.total = res.count

      }



      if (this.activeName === '不良待处理') {

        const res = await MesOrderNgStepSearch(this.form)

        this.tableData = res.data

        this.total = res.count

      }

    },

    // æŠ¥å·¥

    report(row) {

      if (row) {

        this.getMesOrderStepStart('ZZ', '', row.wo_code, row.stepcode)

      } else {

        const temp = this.tableData.find(i => i.id === this.radioSelected)

        this.getMesOrderStepStart('ZZ', '', temp.wo_code, temp.stepcode)

      }

    },

    // å‘æ–™

    sendOut(row) {

      if (row) {

        this.getMesOrderStepStart('WX', 'OUT', row.wo_code, row.stepcode)

      } else {

        const temp = this.tableData.find(i => i.id === this.radioSelected)

        this.getMesOrderStepStart('WX', 'OUT', temp.wo_code, temp.stepcode)

      }

    },

    // æ”¶æ–™

    takeIn(row) {

      if (row) {

        this.getMesOrderStepStart('WX', 'IN', row.wo_code, row.stepcode)

      } else {

        const temp = this.tableData.find(i => i.id === this.radioSelected)

        this.getMesOrderStepStart('WX', 'IN', temp.wo_code, temp.stepcode)

      }

    },

    // ä¸è‰¯å¤„理    ç”Ÿäº§å¼€æŠ¥å·¥æ‰«ç èŽ·å–工单对应工序任务(不良明细)

    async handleBad(row) {

      const data = {

        wocode: row ? row.wo_code : this.tableData.find(i => i.id === this.radioSelected).wo_code,

        stepcode: row ? row.stepcode : this.tableData.find(i => i.id === this.radioSelected).stepcode

      }

      let res = await MesOrderNgSubStepSearch(data)

      if (res.code === '200') {

        res = res.data

        this.dialogForm.wo_code = res.data1.wo_code

        this.dialogForm.partnumber = res.data1.partnumber

        this.dialogForm.partname = res.data1.partname

        this.dialogForm.partspec = res.data1.partspec

        this.dialogForm.seq = res.data1.seq

        this.dialogForm.stepcode = res.data1.stepcode

        this.dialogForm.stepname = res.data1.stepname

        this.dialogForm.stepprice = res.data1.stepprice

        this.dialogForm.nextstepcode = res.data1.nextstepcode

        this.dialogForm.nextstepname = res.data1.nextstepname

        this.dialogForm.nextstepprice = res.data1.nextstepprice

        this.dialogForm.stepdesc = res.data1.stepdesc

        this.dialogForm.planqty = res.data1.planqty

        this.dialogForm.startqty = res.data1.startqty

        this.dialogForm.noreportqty = res.data1.noreportqty // åˆæ ¼æ•°é‡

        this.dialogForm.reportqty = res.data1.reportqty

        this.dialogForm.noputqty = res.data1.noputqty // ä¸è‰¯æ•°é‡

        this.dialogForm.wkshopcode = res.data1.wkshopcode

        this.dialogForm.wkshopname = res.data1.wkshopname

        this.dialogForm.eqpcode = res.data1.eqpcode

        this.dialogForm.eqpname = res.data1.eqpname



        res.data2.forEach(item => {

          item.repair_qty = 0

          item.laborbad_qty = 0

          item.materielbad_qty = 0

        })



        this.badTableData = res.data2



        this.dialogVisible = true

      }

    },

    // ç”Ÿäº§å¼€æŠ¥å·¥ï¼šæŠ¥å·¥/外协(发料/收料)时条件判断及数据返回接口

    async getMesOrderStepStart(OperType, SelectType, wocode, stepcode) {

      const data = {

        OperType, SelectType, wocode, stepcode

      }

      let res = await MesOrderStepStart(data)

      if (res.code === '200') {

        res = res.data

        this.dialogForm.wo_code = res.wo_code

        this.dialogForm.partnumber = res.partnumber

        this.dialogForm.partname = res.partname

        this.dialogForm.partspec = res.partspec

        this.dialogForm.seq = res.seq

        this.dialogForm.stepcode = res.stepcode

        this.dialogForm.stepname = res.stepname

        this.dialogForm.stepprice = res.stepprice

        this.dialogForm.nextstepcode = res.nextstepcode

        this.dialogForm.nextstepname = res.nextstepname

        this.dialogForm.nextstepprice = res.nextstepprice

        this.dialogForm.stepdesc = res.stepdesc

        this.dialogForm.planqty = res.planqty

        this.dialogForm.startqty = res.startqty

        this.dialogForm.noreportqty = res.noreportqty// æœªæŠ¥æ•°é‡

        this.dialogForm.reportqty = res.reportqty // å·²æŠ¥æ•°é‡

        this.dialogForm.noputqty = res.noputqty

        this.dialogForm.wkshopcode = res.wkshopcode

        this.dialogForm.wkshopname = res.wkshopname

        this.dialogForm.eqpcode = res.eqpcode

        this.dialogForm.eqpname = res.eqpname



        if (this.activeName === '外协收料') {

          this.dialogForm.list = []

          res.list.forEach(i => {

            i.acceptQty = parseFloat(i.fqty) - parseFloat(i.sqty) - parseFloat(i.ng_qty) - parseFloat(i.laborbad_qty) - parseFloat(i.materielbad_qty)

            if (i.acceptQty > 0) {

              this.dialogForm.list.push(i)

            }

          })

        }



        // this.dialogForm.list = res.list



        this.dialogVisible = true

      }

    },

    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶

    handleClose() {

      this.dialogForm = {

        'wo_code': '',

        'partnumber': '',

        'partname': '',

        'partspec': '',

        'seq': '',

        'stepcode': '',

        'stepname': '',

        'stepprice': '', // å·¥åºå•ä»·

        'nextstepcode': '',

        'nextstepname': '',

        'nextstepprice': '',

        'stepdesc': '',

        'planqty': 0,

        'startqty': 0, //

        'noreportqty': 0, // æœªæŠ¥æ•°é‡

        'reportqty': 0, // å·²æŠ¥æ•°é‡

        'noputqty': 0, // ä¸è‰¯æ•°é‡

        'wkshopcode': '',

        'wkshopname': '',

        'eqpcode': '',

        'eqpname': '',



        wxcode: '',

        outuser: '',

        fqty: '',

        inuser: '',

        sqty: '',

        list: '',



        remarks: '', // å¤‡æ³¨

        inbarcode: '', // å…¥åº“条码

        defectlist: '', // ä¸è‰¯æ±‡æ€»

        reckway: 'person', // è®¡ä»¶æ–¹å¼(班组:group、个人:person)

        usergroupcode: '', // ç­ç»„编码

        reportuser: [] // æŠ¥å·¥äººå‘˜



      }



      this.defectTableData = []

      this.badTableData = []



      this.$refs.dialogForm.clearValidate()

    },

    // å¯¹è¯æ¡†å–消

    dialogVisibleCancel() {

      this.dialogVisible = false

      this.tabClick()

    },

    // å¯¹è¯æ¡†ç¡®è®¤

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(async valid => {

        if (valid) {

          if (this.activeName === '生产列表') {

            if (this.defectTableData.find(i => i.code.length === 0)) {

              return this.$message.info('缺陷编码/名称不能为空！')

            }

            if (this.defectTableData.find(i => i.badqty.toString().trim() === '' || parseFloat(i.badqty) === 0)) {

              return this.$message.info('不良数量不能为空或为零！')

            }



            if (parseFloat(this.dialogForm.noreportqty) < parseFloat(this.dialogForm.startqty) + parseFloat(this.dialogForm.noputqty)) {

              return this.$message.info('合格数量加不良数量不能大于了未报数量!')

            }

            let inbarcode = ''

            if (this.tableData.find(i => i.id === this.radioSelected).isend === 'Y') {

              const data1 = {

                rightcode: getCookie('ruleCode'),

                partcode: this.dialogForm.partnumber,

                qty: this.dialogForm.startqty,

                onelabqty: this.dialogForm.startqty

              }



              const res1 = await LabelBarCode(data1)

              inbarcode = res1.data[0].labcode

            }



            const defectlist = []

            this.defectTableData.forEach(i => {

              defectlist.push({

                defect_code: i.code.join(','),

                badqty: i.badqty

              })

            })

            const data = {

              mesordercode: this.dialogForm.wo_code,

              partcode: this.dialogForm.partnumber,

              stepseq: this.dialogForm.seq,

              stepcode: this.dialogForm.stepcode,

              stepprice: this.dialogForm.stepprice,

              eqpcode: this.dialogForm.eqpcode,

              inbarcode,

              reckway: this.dialogForm.reckway,

              usergroupcode: this.dialogForm.usergroupcode,

              reportuser: this.dialogForm.reportuser.join(','),

              taskqty: this.dialogForm.planqty,

              // startqty: this.dialogForm.startqty,

              // reportqty: this.dialogForm.reportqty,



              startqty: this.dialogForm.startqty,

              reportqty: this.dialogForm.startqty, // æŠ¥å·¥æ•°é‡



              defectlist,

              remarks: ''

            }

            // console.log(JSON.parse(JSON.stringify(this.defectTableData)))

            // console.log(JSON.parse(JSON.stringify(data)))



            this.$store.state.app.buttonIsDisabled = true

            const res = await SavaMesOrderStepReport(data)

            if (res.code === '200') {

              this.$notify.success('报工成功！')

              // await this.search()

              await this.tabClick()

              this.$store.state.app.buttonIsDisabled = false

              this.dialogVisible = false



              // è‡ªåˆ¶æŠ¥å·¥æ‰“印标签口子已开好

              // if (JSON.parse(localStorage.getItem('mesSetting')).every) {

              //   this.dialogVisible2 = true

              //   this.ZZprint2(localStorage.getItem('username'))

              // }

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error('报工失败！')

            }

          }



          if (this.activeName === '外协发料') {

            if (parseFloat(this.dialogForm.fqty) < 1) {

              return this.$message.info('发料数量不能为零！')

            }

            if (parseFloat(this.dialogForm.fqty) > parseFloat(this.dialogForm.noreportqty)) {

              return this.$message.info('发料数量不能大于未发数量!')

            }

            const data = {

              mesordercode: this.dialogForm.wo_code,

              partcode: this.dialogForm.partnumber,

              stepseq: this.dialogForm.seq,

              stepcode: this.dialogForm.stepcode,



              wxcode: this.dialogForm.wxcode,

              outuser: this.dialogForm.outuser,

              taskqty: this.dialogForm.planqty,

              fqty: this.dialogForm.fqty

            }

            // console.log(JSON.stringify(data))



            this.$store.state.app.buttonIsDisabled = true

            const res = await SavaMesOrderStepOut(data)

            if (res.code === '200') {

              this.$notify.success('发料成功！')

              // await this.search()

              await this.tabClick()

              this.$store.state.app.buttonIsDisabled = false

              this.dialogVisible = false

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error('发料失败！')

            }

          }



          if (this.activeName === '外协收料') {

            if (this.defectTableData.find(i => i.code.length === 0)) {

              return this.$message.info('缺陷编码/名称不能为空！')

            }

            if (this.defectTableData.find(i => i.badqty.toString().trim() === '' || parseFloat(i.badqty) === 0)) {

              return this.$message.info('不良数量不能为空或为零！')

            }



            if (parseFloat(this.dialogForm.noreportqty) < parseFloat(this.dialogForm.sqty) + parseFloat(this.dialogForm.noputqty)) {

              return this.$message.info('收料数量加不良数量不能大于了可收数量!')

            }



            if (this.dialogForm.list.find(i => i.Name === this.dialogForm.wxcode)) {

              if (this.dialogForm.list.find(i => i.Name === this.dialogForm.wxcode).acceptQty < parseFloat(this.dialogForm.sqty) + parseFloat(this.dialogForm.noputqty)) {

                return this.$message.info('收料数量加不良数量不能大于该供应商可收数量!')

              }

            } else {

              return this.$message.info('此供应商无可收数量!')

            }



            let inbarcode = ''

            if (this.tableData.find(i => i.id === this.radioSelected).isend === 'Y') {

              const data1 = {

                rightcode: getCookie('ruleCode'),

                partcode: this.dialogForm.partnumber,

                qty: this.dialogForm.startqty,

                onelabqty: this.dialogForm.startqty

              }



              const res1 = await LabelBarCode(data1)

              inbarcode = res1.data[0].labcode

            }

            const defectlist = []

            this.defectTableData.forEach(i => {

              defectlist.push({

                defect_code: i.code.join(','),

                badqty: i.badqty

              })

            })



            const data = {

              mesordercode: this.dialogForm.wo_code,

              partcode: this.dialogForm.partnumber,

              stepseq: this.dialogForm.seq,

              stepcode: this.dialogForm.stepcode,



              wxcode: this.dialogForm.wxcode,

              inbarcode,

              inuser: this.dialogForm.inuser,

              taskqty: this.dialogForm.planqty,

              sqty: this.dialogForm.sqty,

              defectlist,

              remarks: ''

            }

            // console.log(JSON.parse(JSON.stringify(data)), 1)

            this.$store.state.app.buttonIsDisabled = true

            const res = await SavaMesOrderStepIn(data)

            if (res.code === '200') {

              this.$notify.success('收料成功！')

              // await this.search()

              await this.tabClick()

              this.$store.state.app.buttonIsDisabled = false

              this.dialogVisible = false

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error('收料失败！')

            }

          }



          if (this.activeName === '不良待处理') {

            let flag = false

            this.badTableData.forEach(i => {

              if (parseFloat(i.repair_qty) + parseFloat(i.laborbad_qty) + parseFloat(i.materielbad_qty) > parseFloat(i.ng_qty)) {

                flag = true

              }

            })

            if (flag) {

              return this.$message.info('维修合格数量+工废数量+料废数量不能大于不良数量！')

            }

            this.$store.state.app.buttonIsDisabled = true

            const res = await EditOrderNgStepSeave({ Data: this.badTableData })

            if (res.code === '200') {

              this.$notify.success('提交成功！')

              // await this.search()

              await this.tabClick()

              this.$store.state.app.buttonIsDisabled = false

              this.dialogVisible = false

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error('提交失败！')

            }

          }

        }

      })

    },



    dialogVisible2Close() {

      this.qrForm.qrvalue = ''

      this.qrForm.startqty = ''

      this.qrForm.wo_code = ''

      this.qrForm.partcode = ''

      this.qrForm.partname = ''

      this.qrForm.partspec = ''

      this.qrForm.nextstepname = ''

      this.qrForm.operator = ''

      this.qrForm.operatorTime = ''

      // this.$refs.qrCodeDiv2 = ''

    },



    ZZprint2(username) {

      if (this.dialogForm.nextstepcode !== '') {

        this.qrForm.qrvalue = this.dialogForm.wo_code + ';' + this.dialogForm.nextstepcode

      } else {

        this.qrForm.qrvalue = this.dialogForm.inbarcode

      }



      this.qrForm.startqty = this.dialogForm.startqty

      this.qrForm.wo_code = this.dialogForm.wo_code

      this.qrForm.partcode = this.dialogForm.partnumber

      this.qrForm.partname = this.dialogForm.partname

      this.qrForm.nextstepname = this.dialogForm.nextstepname

      this.qrForm.operator = username

      this.qrForm.operatorTime = handleDatetime2(new Date())

      this.$nextTick(() => {

        this.bindQRCode(this.qrForm.qrvalue)

      })

    },

    // ç”ŸæˆäºŒç»´ç 

    bindQRCode(text) {

      new QRCode(this.$refs.qrCodeDiv2, {

        text: text,

        // width: 50,

        width: 60,

        // height: 50,

        height: 60,

        colorDark: '#000', // äºŒç»´ç é¢œè‰²

        colorLight: '#ffffff', // äºŒç»´ç èƒŒæ™¯è‰²

        correctLevel: QRCode.CorrectLevel.L// å®¹é”™çŽ‡ï¼ŒL/M/H

      })

    },

    // ç¼ºé™·æ–°å¢ž

    addDefect() {

      if (this.defectTableData.find(i => i.code.length === 0)) {

        return this.$message.info('缺陷编码/名称不能为空！')

      }

      if (this.defectTableData.find(i => i.badqty.toString().trim() === '' || parseFloat(i.badqty) === 0)) {

        return this.$message.info('不良数量不能为空或为零！')

      }



      this.defectTableData.push({

        uuid: nanoid(), code: [], badqty: ''

      })

    },

    // ç¼ºé™·åˆ é™¤

    defectDel(row) {

      this.defectTableData = this.defectTableData.filter(i => i.uuid !== row.uuid)



      this.dialogForm.noputqty = 0

      this.defectTableData.forEach(i => {

        this.dialogForm.noputqty += parseFloat(i.badqty)

      })

    },

    badqtyChange(val) {

      this.dialogForm.noputqty = 0

      this.defectTableData.forEach(i => {

        this.dialogForm.noputqty += parseFloat(i.badqty)

      })

    },

    reckwayChange(val) {

      // console.log(val)

      this.dialogForm.usergroupcode = ''

      this.dialogForm.reportuser = []

    },

    async usergroupChange(val) {

      const { data: res } = await GroupsPersonPermissions({ groupcode: val })

      this.dialogForm.reportuser = res[0].usercode_list ? res[0].usercode_list.split(',') : []

    },

    rowClick(row, event, column) {

      this.radioSelected = row.id

    },

    // èŽ·å–页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 275

        // this.$refs.tableDataRef.doLayout()

      })

    },

    reset() {

      this.form.wkshopcode = ''

      this.form.wocode = ''

      this.form.workOrderCurrentValue = ''

      this.form.partcode = ''

      this.form.partname = ''

      this.form.partspec = ''

      this.search()

    },



    headerCellStyle() {

      return this.$headerCellStyle

    },

    cellStyle() {

      return this.$cellStyle

    }

  }

}

</script>

<style lang="scss" scoped>



::v-deep .elTableDiv .el-radio__label {

  display: none !important;

}



.dialogFormItem {

  margin: 0 10px 0 0;

}



.dialogFormItemDiv {

  width: 200px;

}



::v-deep .el-select__caret {

  display: flex;

  align-items: center;

  justify-content: center;

}



::v-deep .el-dialog .el-form-item__label {

  font-weight: lighter !important;

}



::v-deep .el-dialog .el-divider__text {

  font-weight: bolder !important;

}



</style>

<template>
  <div>
    <div class="body" style="padding-top: 10px;" :style="{height:mainHeight+'px'}">

      <div style="position: absolute;right:36px;z-index: 2;top: 13px">
        <el-button
          v-if="activeName==='生产列表'&&tableData.length>0"
          v-waves
          icon="el-icon-thumb"
          type="primary"
          :disabled="radioSelected===''"
          @click="report()"
        >报工
        </el-button>
        <el-button
          v-if="activeName==='外协发料'&&tableData.length>0"
          v-waves
          type="primary"
          icon="el-icon-thumb"
          :disabled="radioSelected===''"
          @click="sendOut()"
        >发料
        </el-button>
        <el-button
          v-if="activeName==='外协收料'&&tableData.length>0"
          v-waves
          type="primary"
          icon="el-icon-thumb"
          :disabled="radioSelected===''"
          @click="takeIn()"
        >收料
        </el-button>
        <el-button
          v-if="activeName==='不良待处理'&&tableData.length>0"
          v-waves
          type="primary"
          icon="el-icon-thumb"
          :disabled="radioSelected===''"
          @click="handleBad()"
        >处理
        </el-button>
      </div>

      <div v-if="form.wocode" style="position: absolute;left: 460px;z-index: 2;top: 23px;font-weight: bolder">
        å½“前工单号为：{{ form.wocode }}
      </div>

      <el-tabs
        ref="elTabs"
        v-model="activeName"
        type="border-card"
        @tab-click="tabClick"
      >

        <el-tab-pane
          v-for="item in elTabsArr"
          :key="item.code"
          :label="item.name"
          :name="item.name"
        >

          <div class="bodyTopFormGroup">
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              inline
              style="display: flex;"
            >
              <div class="elForm">

                <el-form-item label="工单号" style=" display: flex;">
                  <el-input
                    v-model="workOrderCurrentValue"
                    :name="'produceCode'+item.code"
                    placeholder="请扫描或输入"
                    style="width: 300px"

                    @keyup.enter.native="val=>enterNative(val,'produceCode' + item.code)"
                  />
                </el-form-item>
                <el-form-item label="产品编码" style=" display: flex;">
                  <el-input
                    v-model="form.partcode"
                    placeholder="请输入"
                    style="width: 200px"

                    @keyup.enter.native="val=>enterNative(val,'produceCode' + item.code)"
                  />
                </el-form-item>
                <el-form-item label="产品名称" style=" display: flex;">
                  <el-input
                    v-model="form.partname"
                    placeholder="请输入"

                    style="width: 200px"
                    @keyup.enter.native="val=>enterNative(val,'produceCode' + item.code)"
                  />
                </el-form-item>
                <el-form-item label="车间名称" style=" display: flex;">
                  <el-select
                    v-model="form.wkshopcode"
                    filterable
                    :popper-append-to-body="false"
                    style="width: 200px"

                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in wkshopcodeArr"
                      :key="item.torg_code"
                      :label="item.torg_name"
                      :value="item.torg_code"
                    />
                  </el-select>
                </el-form-item>

                <!--                <el-form-item label="规格型号" style=" display: flex;">-->
                <!--                  <el-input v-model="form.partspec" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->

              </div>
              <div
                class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
              >
                <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
              </div>
            </el-form>
            <div
              class="bodyTopFormExpand"
              style="height:5px"
            >
              <!--          <svg-icon-->
              <!--            v-show="mouseHoverType==='mouseout'"-->
              <!--            style="cursor: pointer"-->
              <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
              <!--            @mouseenter="mouseHoverType=$event.type"-->
              <!--          />-->
              <!--          <svg-icon-->
              <!--            v-show="mouseHoverType==='mouseenter'"-->
              <!--            style="cursor: pointer"-->
              <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
              <!--            @click="isExpandForm=!isExpandForm"-->
              <!--            @mouseout="mouseHoverType=$event.type"-->
              <!--          />-->
            </div>
          </div>

          <div class="elTableDiv">
            <el-table
              ref="tableDataRef"
              :key="'tableDataRef'+item.code"
              class="tableFixed"
              :data="tableData"
              :height="tableHeight+50"
              border
              row-class-name="custom-row"
              :style="{width: 100+'%',height:tableHeight+'px'}"
              highlight-current-row
              :header-cell-style="headerCellStyle()"
              :cell-style="cellStyle()"
              @sort-change="sortChange"
              @row-click="rowClick"
            >
              <el-table-column
                width="50"
                fixed
              >
                <template slot-scope="{row}">
                  <el-radio
                    v-model="radioSelected"
                    :label="row.id"
                    style="color: transparent;padding-left: 10px;"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="rowNum"
                width="50"
                label="序号"
                fixed
              />
              <el-table-column
                v-if="activeName!=='不良待处理'"
                prop="status"
                show-tooltip-when-overflow
                label="状态"
                sortable="custom"
                width="80"
              >
                <template slot-scope="{row}">
                  <div v-if="row.status==='NEW'">新订单</div>
                  <div v-if="row.status==='ALLO'">已派发</div>
                  <div v-if="row.status==='START'">开工</div>
                  <div v-if="row.status==='CLOSED'">完工</div>
                  <div v-if="row.status==='NOSCHED'">待排程</div>
                  <div v-if="row.status==='SCHED'">已排程</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="wo_code"
                label="工单号"
                min-width="160"
                show-tooltip-when-overflow
                sortable="custom"
              />
              <el-table-column
                prop="partcode"
                label="产品编码"
                min-width="110"
                sortable="custom"
                show-tooltip-when-overflow
              />
              <el-table-column
                prop="partname"
                min-width="110"
                show-tooltip-when-overflow
                label="产品名称"
                sortable="custom"
              />
              <el-table-column
                prop="partspec"
                min-width="110"
                show-tooltip-when-overflow
                label="规格型号"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.partspec ? row.partspec : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="wkshp_name"
                min-width="110"
                show-tooltip-when-overflow
                label="车间名称"
                sortable="custom"
              />
              <el-table-column
                prop="stepname"
                label="工序名称"
                show-tooltip-when-overflow
                width="120"
                sortable="custom"
              />
              <el-table-column
                prop="plan_qty"
                label="任务数量"
                width="110"
                sortable="custom"
                show-tooltip-when-overflow
              />
              <el-table-column
                v-if="activeName==='外协发料'||activeName==='外协收料'"
                prop="fqty"
                show-tooltip-when-overflow
                label="已发料数量"
                sortable="custom"
                width="120"
              />
              <el-table-column
                prop="good_qty"
                show-tooltip-when-overflow
                :label="activeName==='外协发料'||activeName==='外协收料'?'已收料数量':'合格数量'"
                sortable="custom"
                width="120"
              />
              <el-table-column
                prop="ng_qty"
                label="不良数量"
                show-tooltip-when-overflow
                width="120"
                sortable="custom"
              />
              <el-table-column
                prop="laborbad_qty"
                label="工废数量"
                width="120"
                show-tooltip-when-overflow
                sortable="custom"
              />
              <el-table-column
                prop="materielbad_qty"
                label="料废数量"
                width="120"
                show-tooltip-when-overflow
                sortable="custom"
              />
              <el-table-column
                prop="priuserdefnvc1"
                label="客户名称"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc1 ? row.priuserdefnvc1 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc6"
                label="客户编码"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc6 ? row.priuserdefnvc6 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc2"
                label="对内名称"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc2 ? row.priuserdefnvc2 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc3"
                label="CTP日期"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc3 ? row.priuserdefnvc3 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc4"
                label="钢刀编号"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc4 ? row.priuserdefnvc4 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="priuserdefnvc5"
                label="盒型"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.priuserdefnvc5 ? row.priuserdefnvc5 : '/' }}
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="120"
                fixed="right"
              >
                <template slot-scope="{row}">
                  <div class="operationClass">
                    <el-button v-if="activeName==='生产列表'" v-waves icon="el-icon-thumb" type="text" @click="report(row)">
                      æŠ¥å·¥
                    </el-button>
                    <el-button
                      v-if="activeName==='外协发料'"
                      v-waves
                      icon="el-icon-thumb"
                      type="text"
                      @click="sendOut(row)"
                    >发料
                    </el-button>
                    <el-button v-if="activeName==='外协收料'" v-waves icon="el-icon-thumb" type="text" @click="takeIn(row)">
                      æ”¶æ–™
                    </el-button>
                    <el-button
                      v-if="activeName==='不良待处理'"
                      v-waves
                      icon="el-icon-thumb"
                      type="text"
                      @click="handleBad(row)"
                    >处理
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--分页-->
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes"
            popper-class="select_bottom"
            @pagination="search"
          />
        </el-tab-pane>

      </el-tabs>

    </div>

    <!--    å¼€æŠ¥å·¥ã€å¤–协、不良处理-->
    <el-dialog
      v-el-drag-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="1160px"
      :close-on-click-modal="false"
      :top="activeName==='生产列表'||activeName==='外协收料'? '6vh':'15vh'"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <!--        <el-divider v-if="activeName==='生产列表'||activeName==='外协收料'||activeName==='不良待处理'" content-position="left">基本信息</el-divider>-->
        <el-divider v-if="activeName==='生产列表'" content-position="left">报工信息</el-divider>
        <el-divider v-if="activeName==='外协收料'" content-position="left">收料信息</el-divider>
        <el-divider v-if="activeName==='不良待处理'" content-position="left">待处理信息</el-divider>
        <el-form-item label="工单编号" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.wo_code }}</div>
        </el-form-item>
        <el-form-item label="产品编码" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.partnumber }}</div>
        </el-form-item>
        <el-form-item label="产品名称" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.partname }}</div>
        </el-form-item>
        <el-form-item label="规格型号" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.partspec ? dialogForm.partspec : '/' }}</div>
        </el-form-item>
        <el-form-item label="当前工序" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.stepname }}</div>
        </el-form-item>
        <el-form-item label="下道工序" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.nextstepname ? dialogForm.nextstepname : '/' }}</div>
        </el-form-item>
        <el-form-item label="任务数量" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.planqty }}</div>
        </el-form-item>

        <el-form-item v-if="activeName==='不良待处理'" label="合格数量" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.noreportqty }}</div>
        </el-form-item>
        <el-form-item v-if="activeName==='不良待处理'" label="不良数量" class="dialogFormItem">
          <div class="dialogFormItemDiv">{{ dialogForm.noputqty }}</div>
        </el-form-item>

        <el-form-item
          v-if="activeName!=='不良待处理'"
          :label="activeName==='生产列表'? '未报/已报':(activeName==='外协发料'?'未发/已发':'未收/已收')"
          class="dialogFormItem"
        >
          <div class="dialogFormItemDiv">{{ dialogForm.noreportqty + '/' + dialogForm.reportqty }}</div>
        </el-form-item>

        <el-form-item v-if="activeName==='生产列表'||activeName==='外协收料'" label="不良数量" class="dialogFormItem">
          <div class="dialogFormItemDiv" style="color:red;">{{ dialogForm.noputqty }}</div>
        </el-form-item>

        <el-form-item v-if="activeName==='生产列表'" label="报工设备" class="dialogFormItem">
          <el-select
            v-model="dialogForm.eqpcode"
            style="width:200px"
            placeholder="请选择"
            filterable
            clearable
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in eqpArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-if="activeName==='生产列表'" label="计件方式" class="dialogFormItem">
          <el-radio-group
            v-model="dialogForm.reckway"
            style="width: 200px;"
            @change="reckwayChange"
          >
            <el-radio label="person">个人</el-radio>
            <el-radio label="group">班组</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          v-if="activeName==='生产列表'"
          :prop="dialogForm.reckway==='group'?'usergroupcode':''"
          label="报工班组"
          class="dialogFormItem"
        >
          <el-select
            v-model="dialogForm.usergroupcode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :disabled="dialogForm.reckway!=='group'"
            :popper-append-to-body="false"
            @change="usergroupChange"
          >
            <el-option
              v-for="item in usergroupArr"
              :key="item.usergroupcode"
              :label="item.usergroupname"
              :value="item.usergroupcode"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="activeName==='生产列表'" prop="reportuser" label="报工人员" class="dialogFormItem">
          <el-select
            v-model="dialogForm.reportuser"
            style="width:200px"
            placeholder="请选择"
            filterable
            multiple
            collapse-tags
            :multiple-limit="dialogForm.reckway==='group'?0:1"
            :disabled="dialogForm.reckway==='group'&&dialogForm.usergroupcode===''"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in reportuserArr"
              :key="item.usercode"
              :label="item.username"
              :value="item.usercode"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="activeName==='生产列表'" prop="startqty" label="合格数量" class="dialogFormItem">
          <el-input v-model="dialogForm.startqty" oninput="value=value.replace(/[^\d]/g,'')" style="width: 200px" />
        </el-form-item>

        <el-form-item v-if="activeName==='外协发料'||activeName==='外协收料'" prop="wxcode" label="外协供方" class="dialogFormItem">
          <el-select
            v-model="dialogForm.wxcode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in wxArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="activeName==='外协发料'" prop="outuser" label="发料人员" class="dialogFormItem">
          <el-select
            v-model="dialogForm.outuser"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in reportuserArr"
              :key="item.usercode"
              :label="item.username"
              :value="item.usercode"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="activeName==='外协发料'" prop="fqty" label="发料数量" class="dialogFormItem">
          <el-input v-model="dialogForm.fqty" oninput="value=value.replace(/[^\d]/g,'')" style="width: 200px" />
        </el-form-item>

        <el-form-item v-if="activeName==='外协收料'" prop="inuser" label="收料人员" class="dialogFormItem">
          <el-select
            v-model="dialogForm.inuser"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in reportuserArr"
              :key="item.usercode"
              :label="item.username"
              :value="item.usercode"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="activeName==='外协收料'" prop="sqty" label="收料数量" class="dialogFormItem">
          <el-input v-model="dialogForm.sqty" oninput="value=value.replace(/[^\d]/g,'')" style="width: 200px" />
        </el-form-item>

        <el-divider v-if="activeName==='生产列表'||activeName==='外协收料'" content-position="left">不良明细信息</el-divider>
        <el-button
          v-if="activeName==='生产列表'||activeName==='外协收料'"
          v-waves
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="addDefect"
        >新增
        </el-button>
        <el-table
          v-if="activeName==='生产列表'||activeName==='外协收料'"
          ref="defectTableDataRef"
          key="defectTableDataKey"
          :data="defectTableData"
          border
          row-class-name="custom-row"
          height="200"
          style="width: 100%;margin-top: 15px;"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50"
          />
          <el-table-column
            prop="stepcode"
            label="缺陷编码/名称"
            align="center"
            min-width="450"
          >
            <template slot-scope="{row}">
              <el-select
                v-model="row.code"
                style="width: 100%"
                placeholder="请选择"
                multiple
                filterable
              >
                <!--                collapse-tags-->
                <el-option
                  v-for="item in defectArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            prop="badqty"
            label="不良数量"
            align="center"
          >
            <template slot-scope="{row}">
              <el-input
                v-model="row.badqty"
                placeholder="请输入数量"
                oninput="value=value.replace(/[^0-9]/g,'')"
                style="width: 100%"
                @click.stop=""
                @change="badqtyChange"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="50"
            align="center"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    style="margin-left: 7px;"
                    @click="defectDel(row)"
                  />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-divider v-if="activeName==='外协收料'" content-position="left">可收料供应商</el-divider>
        <div
          v-for="(item,index) in dialogForm.list"
          v-if="item.fqty>0"
          :key="item.name"
          style="display: flex;line-height: 26px;height: 26px;margin-left:30px;align-items: center"
        >
          <div
            style="color: #fff;width: 22px;height: 22px;display: flex;justify-content: center;align-items: center;border-radius: 50%"
            :style="{backgroundColor:$store.state.settings.theme}"
          >{{ index + 1 }}
          </div>
          <div style="margin-left:30px;width: 160px;" class="ellipsis">
            {{ item.tp }}
          </div>
          <div style="margin-left:30px;">
            å¯æ”¶æ•°é‡ï¼š{{ item.acceptQty }}
          </div>
        </div>

        <el-divider v-if="activeName==='不良待处理'" content-position="left">不良信息明细</el-divider>
        <el-table
          v-if="activeName==='不良待处理'"
          ref="badTableDataDataRef"
          key="badTableDataDataKey"
          :data="badTableData"
          border
          row-class-name="custom-row"
          height="300"
          style="width: 100%;margin-top: 15px;"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50"
          />
          <!--          <el-table-column-->
          <!--            prop="step_code"-->
          <!--            label="工序编码"-->
          <!--            show-tooltip-when-overflow-->
          <!--            align="center"-->
          <!--          />-->
          <el-table-column
            prop="stepname"
            label="工序名称"
            show-tooltip-when-overflow
            align="center"
          />
          <el-table-column
            prop="plan_qty"
            label="任务数量"
            show-tooltip-when-overflow
            align="center"
          />
          <el-table-column
            prop="report_qty"
            label="合格数量"
            show-tooltip-when-overflow
            align="center"
          />
          <el-table-column
            prop="ng_qty"
            label="不良数量"
            show-tooltip-when-overflow
            align="center"
          />
          <el-table-column
            prop="defect_name"
            label="不良原因"
            show-tooltip-when-overflow
            align="center"
          />
          <el-table-column
            prop="repair_qty"
            label="维修合格数量"
            align="center"
          >
            <template slot-scope="{row}">
              <el-input
                v-model="row.repair_qty"
                placeholder="请输入数量"
                oninput="value=value.replace(/[^0-9]/g,'')"
                style="width: 100%"
                @click.stop=""
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="laborbad_qty"
            label="工废数量"
            align="center"
          >
            <template slot-scope="{row}">
              <el-input
                v-model="row.laborbad_qty"
                placeholder="请输入数量"
                oninput="value=value.replace(/[^0-9]/g,'')"
                style="width: 100%"
                @click.stop=""
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="materielbad_qty"
            label="料废数量"
            align="center"
          >
            <template slot-scope="{row}">
              <el-input
                v-model="row.materielbad_qty"
                placeholder="请输入数量"
                oninput="value=value.replace(/[^0-9]/g,'')"
                style="width: 100%"
                @click.stop=""
              />
            </template>
          </el-table-column>

          <!--          <el-table-column-->
          <!--            prop="badqty"-->
          <!--            label="不良数量"-->
          <!--            show-tooltip-when-overflow-->
          <!--            align="center"-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <el-input-->
          <!--                v-model="row.badqty"-->
          <!--                placeholder="请输入数量"-->
          <!--                oninput="value=value.replace(/[^0-9]/g,'')"-->
          <!--                style="width: 100%"-->
          <!--                @click.stop=""-->
          <!--                @change="badqtyChange"-->
          <!--              />-->
          <!--            </template>-->
          <!--          </el-table-column>-->

          <!--          <el-table-column-->
          <!--            label="操作"-->
          <!--            width="50"-->
          <!--            align="center"-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div class="operationClass">-->
          <!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->
          <!--                  <i-->
          <!--                    class="el-icon-delete"-->
          <!--                    :style="{color:$store.state.settings.theme}"-->
          <!--                    style="margin-left: 7px;"-->
          <!--                    @click="defectDel(row)"-->
          <!--                  />-->
          <!--                </el-tooltip>-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->

        </el-table>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    æµè½¬å°æ ‡ç­¾æ‰“印-->
    <!--打印预览页面  å°æ ‡ç­¾-->
    <el-dialog
      v-el-drag-dialog
      title="预览"
      :visible.sync="dialogVisible2"
      width="1140"
      top="10vh"
      :close-on-click-modal="false"
      @close="dialogVisible2Close"
    >
      <!-- è¦æ‰“印的区域 -->
      <div id="printMe2" style="padding: 30px;">
        <div
          style="display: flex;width: 280px;height: 150px;border: 1px solid #000;text-align: center;font-size: 10px;"
        >

          <div style="width: 90px;display: flex;flex-direction: column;border-right: 1px solid #000">
            <div
              style="display: flex;height: 90px;border-bottom:1px solid #000;
              justify-content: center;align-items: center;position: relative"
            >
              <div id="qrCode2" ref="qrCodeDiv2" style="overflow-y: hidden;height:60px;position: absolute;left: 14px;" />
            </div>
            <div
              style="display: flex;height: 30px;justify-content: flex-start;border-bottom:1px solid #000;align-items: center"
            >
              <div style="margin-left: 5px;width: 28px">数量:</div>
              {{ qrForm.startqty }}
            </div>
            <div style="display: flex;height: 30px;justify-content: flex-start;align-items: center">
              <div style="margin-left: 5px;width: 42px">处理人:</div>
              {{ qrForm.operator }}
            </div>
          </div>

          <div style="width:190px;display: flex;flex-direction: column">
            <div
              style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center;text-align: left"
            >
              <div style="width: 60px;margin-left: 5px;">工单编号:</div>
              <div>{{ qrForm.wo_code }}</div>
            </div>
            <div
              style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center ;text-align: left"
            >
              <div style="width: 60px;margin-left: 5px;">产品编码:</div>
              <div>{{ qrForm.partcode }}</div>
            </div>
            <div
              style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
            >
              <div style="width:60px;margin-left: 5px;">产品名称:</div>
              <div>{{ qrForm.partname }}</div>
            </div>
            <div
              style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
            >
              <div style="width:60px;margin-left: 5px;">{{ qrForm.nextstepname?'下道工序':'产品规格' }}:</div>
              <div>{{ qrForm.nextstepname?qrForm.nextstepname:qrForm.partspec?qrForm.partspec:'/' }}</div>
            </div>
            <div style="display: flex;height: 20%;justify-content: flex-start;align-items: center;text-align: left">
              <div style="width: 60px;margin-left: 5px;">处理时间:</div>
              <div>{{ qrForm.operatorTime }}</div>
            </div>

          </div>

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisible2 = false">取 æ¶ˆ</el-button>
          <el-button v-waves v-print="printObj2" type="primary">ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import $ from 'jquery'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import {
  EditOrderNgStepSeave,
  MesOrderNgStepSearch,
  MesOrderNgSubStepSearch,
  MesOrderStepSearch, MesOrderStepStart,
  MesOrderWxStepSearch, SavaMesOrderStepIn, SavaMesOrderStepOut, SavaMesOrderStepReport
} from '@/api/WorkOrder'
import {
  CustomerPermissions,
  DefectPermissions,
  EqpPermissions,
  GroupsPermissions,
  GroupsPersonPermissions,
  PersonPermissions, PrentOrganizationNoCompany
} from '@/api/GeneralBasicData'
import { nanoid } from 'nanoid'
import { LabelBarCode } from '@/api/systemSetting'
import { getCookie } from '@/utils/auth'
import { handleDatetime2 } from '@/utils/global'
import QRCode from 'qrcodejs2'
export default {
  name: 'StepReport',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        wkshopcode: '',
        wocode: '', // å·¥å•å·
        partcode: '', // äº§å“ç¼–码
        partname: '', // äº§å“åç§°
        partspec: '', // äº§å“è§„æ ¼
        prop: 'lm_date', // æŽ’序字段
        order: 'desc', // æŽ’序字段
        page: 1, // ç¬¬å‡ é¡µ
        rows: 20 // æ¯é¡µå¤šå°‘条
      },
      wkshopcodeArr: [],
      total: 10,
      tableData: [],
      activeName: '生产列表',
      elTabsArr: [
        { code: 'ZZ', name: '生产列表' },
        { code: 'OUT', name: '外协发料' },
        { code: 'IN', name: '外协收料' },
        { code: 'BAD', name: '不良待处理' }
      ],

      radioSelected: '', // å¤šé€‰æ¡†é€‰ä¸­å€¼

      dialogVisible: false,
      dialogTitle: '', // å¯¹è¯æ¡†å°æ ‡é¢˜

      dialogForm: {
        'wo_code': '',
        'partnumber': '',
        'partname': '',
        'partspec': '',
        'seq': '',
        'stepcode': '',
        'stepname': '',
        'stepprice': '', // å·¥åºå•ä»·
        'nextstepcode': '',
        'nextstepname': '',
        'nextstepprice': '',
        'stepdesc': '',
        'planqty': 0,
        'startqty': 0, //
        'noreportqty': 0, // æœªæŠ¥æ•°é‡
        'reportqty': 0, // å·²æŠ¥æ•°é‡
        'noputqty': 0, // ä¸è‰¯æ•°é‡
        'wkshopcode': '',
        'wkshopname': '',
        'eqpcode': '',
        'eqpname': '',

        remarks: '', // å¤‡æ³¨
        inbarcode: '', // å…¥åº“条码
        defectlist: '', // ä¸è‰¯æ±‡æ€»
        reckway: 'person', // è®¡ä»¶æ–¹å¼(班组:group、个人:person)
        usergroupcode: '', // ç­ç»„编码
        reportuser: [], // æŠ¥å·¥äººå‘˜

        wxcode: '',
        outuser: '',
        fqty: '',
        inuser: '',
        sqty: '',
        list: ''

      },
      dialogFormRules: {
        eqpcode: [
          { required: true, message: '请选择报工设备', trigger: ['blur', 'change'] }
        ],
        usergroupcode: [
          { required: true, message: '请选择报工班组', trigger: ['blur', 'change'] }
        ],
        reportuser: [
          { required: true, message: '请选择报工人员', trigger: ['blur', 'change'] }
        ],
        startqty: [
          { required: true, message: '请输入合格数量', trigger: ['blur', 'change'] }
        ],
        wxcode: [
          { required: true, message: '请选择外协供方', trigger: ['blur', 'change'] }
        ],
        outuser: [
          { required: true, message: '请选择发料人员', trigger: ['blur', 'change'] }
        ],
        inuser: [
          { required: true, message: '请选择收料人员', trigger: ['blur', 'change'] }
        ],
        fqty: [
          { required: true, message: '请输入发料数量', trigger: ['blur', 'change'] }
        ],
        sqty: [
          { required: true, message: '请输入收料数量', trigger: ['blur', 'change'] }
        ]

      },
      reckwayArr: [// æŠ¥å·¥ç±»åž‹
        { code: 'group', name: '班组' },
        { code: 'person', name: '个人' }
      ],
      reportuserArr: [], // æŠ¥å·¥äººå‘˜
      usergroupArr: [], // æŠ¥å·¥ç­ç»„
      eqpArr: [], // æŠ¥å·¥è®¾å¤‡
      defectArr: [], // ä¸è‰¯ç¼ºé™·
      wxArr: [], // å¾€æ¥å•ä½ä¸‹æ‹‰

      defectTableData: [],
      badTableData: [],
      workOrderCurrentValue: '',

      dialogVisible2: false, //
      qrForm: { // æ‰“印内容
        qrvalue: '',
        startqty: '',
        wo_code: '',
        partcode: '',
        partname: '',
        partspec: '',
        nextstepname: '',
        operator: '', // æ“ä½œäºº
        operatorTime: ''// æ“ä½œæ—¶é—´
      },
      printObj2: {
        id: 'printMe2',
        popTitle: '打印模板',
        preview: false,
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
        closeCallback(vue) { // å…³é—­æ‰“印的回调事件（无法确定点击的是确认还是取消）
          console.log('11212', vue)
          // vue.dialogVisible = false
          vue.dialogVisible2 = false
          vue.dialogVisible = false
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('执行了打印')
        }
      },
      xx: ''
    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.tabClick()

    this.getAllSelectArr()
  },
  methods: {

    async getAllSelectArr() {
      const { data: res1 } = await GroupsPermissions()// ç­ç»„
      this.usergroupArr = res1

      const { data: res2 } = await PersonPermissions() // äººå‘˜
      this.reportuserArr = res2

      const { data: res3 } = await DefectPermissions() // ç¼ºé™·
      this.defectArr = res3

      const { data: res4 } = await EqpPermissions() // è®¾å¤‡
      this.eqpArr = res4

      const { data: res5 } = await CustomerPermissions() // å¾€æ¥å•ä½
      this.wxArr = res5

      const { data: res6 } = await PrentOrganizationNoCompany()// æ— å…¬å¸çš„组织下拉
      this.wkshopcodeArr = res6
    },
    tabClick() {
      let belong
      switch (this.activeName) {
        case '生产列表':
          belong = 'produceCodeZZ'
          this.dialogTitle = '报工'
          break
        case '外协发料':
          belong = 'produceCodeOUT'
          this.dialogTitle = '发料'
          break
        case '外协收料':
          belong = 'produceCodeIN'
          this.dialogTitle = '收料'
          break
        case '不良待处理':
          belong = 'produceCodeBAD'
          this.dialogTitle = '不良处理'
          break
      }
      this.enterNative(this.form.wocode, belong)

      this.radioSelected = ''
    },
    enterNative(val, belong) {
      if (belong === 'produceCodeZZ') {
        this.$nextTick(() => {
          $('input[name=\'produceCodeZZ\']')[0].focus()
        })
      }
      if (belong === 'produceCodeOUT') {
        this.$nextTick(() => {
          $('input[name=\'produceCodeOUT\']')[0].focus()
        })
      }
      if (belong === 'produceCodeIN') {
        this.$nextTick(() => {
          $('input[name=\'produceCodeIN\']')[0].focus()
        })
      }
      if (belong === 'produceCodeBAD') {
        this.$nextTick(() => {
          $('input[name=\'produceCodeBAD\']')[0].focus()
        })
      }
      this.search()
    },
    // æŽ’序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.search()
    },
    // æŸ¥è¯¢
    async search() {
      this.form.wocode = this.workOrderCurrentValue
      this.workOrderCurrentValue = ''
      if (this.activeName === '生产列表') {
        const res = await MesOrderStepSearch(this.form)
        this.tableData = res.data
        this.total = res.count
      }
      if (this.activeName === '外协发料' || this.activeName === '外协收料') {
        const res = await MesOrderWxStepSearch(this.form)
        this.tableData = res.data
        this.total = res.count
      }

      if (this.activeName === '不良待处理') {
        const res = await MesOrderNgStepSearch(this.form)
        this.tableData = res.data
        this.total = res.count
      }
    },
    // æŠ¥å·¥
    report(row) {
      if (row) {
        this.getMesOrderStepStart('ZZ', '', row.wo_code, row.stepcode)
      } else {
        const temp = this.tableData.find(i => i.id === this.radioSelected)
        this.getMesOrderStepStart('ZZ', '', temp.wo_code, temp.stepcode)
      }
    },
    // å‘æ–™
    sendOut(row) {
      if (row) {
        this.getMesOrderStepStart('WX', 'OUT', row.wo_code, row.stepcode)
      } else {
        const temp = this.tableData.find(i => i.id === this.radioSelected)
        this.getMesOrderStepStart('WX', 'OUT', temp.wo_code, temp.stepcode)
      }
    },
    // æ”¶æ–™
    takeIn(row) {
      if (row) {
        this.getMesOrderStepStart('WX', 'IN', row.wo_code, row.stepcode)
      } else {
        const temp = this.tableData.find(i => i.id === this.radioSelected)
        this.getMesOrderStepStart('WX', 'IN', temp.wo_code, temp.stepcode)
      }
    },
    // ä¸è‰¯å¤„理    ç”Ÿäº§å¼€æŠ¥å·¥æ‰«ç èŽ·å–工单对应工序任务(不良明细)
    async handleBad(row) {
      const data = {
        wocode: row ? row.wo_code : this.tableData.find(i => i.id === this.radioSelected).wo_code,
        stepcode: row ? row.stepcode : this.tableData.find(i => i.id === this.radioSelected).stepcode
      }
      let res = await MesOrderNgSubStepSearch(data)
      if (res.code === '200') {
        res = res.data
        this.dialogForm.wo_code = res.data1.wo_code
        this.dialogForm.partnumber = res.data1.partnumber
        this.dialogForm.partname = res.data1.partname
        this.dialogForm.partspec = res.data1.partspec
        this.dialogForm.seq = res.data1.seq
        this.dialogForm.stepcode = res.data1.stepcode
        this.dialogForm.stepname = res.data1.stepname
        this.dialogForm.stepprice = res.data1.stepprice
        this.dialogForm.nextstepcode = res.data1.nextstepcode
        this.dialogForm.nextstepname = res.data1.nextstepname
        this.dialogForm.nextstepprice = res.data1.nextstepprice
        this.dialogForm.stepdesc = res.data1.stepdesc
        this.dialogForm.planqty = res.data1.planqty
        this.dialogForm.startqty = res.data1.startqty
        this.dialogForm.noreportqty = res.data1.noreportqty // åˆæ ¼æ•°é‡
        this.dialogForm.reportqty = res.data1.reportqty
        this.dialogForm.noputqty = res.data1.noputqty // ä¸è‰¯æ•°é‡
        this.dialogForm.wkshopcode = res.data1.wkshopcode
        this.dialogForm.wkshopname = res.data1.wkshopname
        this.dialogForm.eqpcode = res.data1.eqpcode
        this.dialogForm.eqpname = res.data1.eqpname

        res.data2.forEach(item => {
          item.repair_qty = 0
          item.laborbad_qty = 0
          item.materielbad_qty = 0
        })

        this.badTableData = res.data2

        this.dialogVisible = true
      }
    },
    // ç”Ÿäº§å¼€æŠ¥å·¥ï¼šæŠ¥å·¥/外协(发料/收料)时条件判断及数据返回接口
    async getMesOrderStepStart(OperType, SelectType, wocode, stepcode) {
      const data = {
        OperType, SelectType, wocode, stepcode
      }
      let res = await MesOrderStepStart(data)
      if (res.code === '200') {
        res = res.data
        this.dialogForm.wo_code = res.wo_code
        this.dialogForm.partnumber = res.partnumber
        this.dialogForm.partname = res.partname
        this.dialogForm.partspec = res.partspec
        this.dialogForm.seq = res.seq
        this.dialogForm.stepcode = res.stepcode
        this.dialogForm.stepname = res.stepname
        this.dialogForm.stepprice = res.stepprice
        this.dialogForm.nextstepcode = res.nextstepcode
        this.dialogForm.nextstepname = res.nextstepname
        this.dialogForm.nextstepprice = res.nextstepprice
        this.dialogForm.stepdesc = res.stepdesc
        this.dialogForm.planqty = res.planqty
        this.dialogForm.startqty = res.startqty
        this.dialogForm.noreportqty = res.noreportqty// æœªæŠ¥æ•°é‡
        this.dialogForm.reportqty = res.reportqty // å·²æŠ¥æ•°é‡
        this.dialogForm.noputqty = res.noputqty
        this.dialogForm.wkshopcode = res.wkshopcode
        this.dialogForm.wkshopname = res.wkshopname
        this.dialogForm.eqpcode = res.eqpcode
        this.dialogForm.eqpname = res.eqpname

        if (this.activeName === '外协收料') {
          this.dialogForm.list = []
          res.list.forEach(i => {
            i.acceptQty = parseFloat(i.fqty) - parseFloat(i.sqty) - parseFloat(i.ng_qty) - parseFloat(i.laborbad_qty) - parseFloat(i.materielbad_qty)
            if (i.acceptQty > 0) {
              this.dialogForm.list.push(i)
            }
          })
        }

        // this.dialogForm.list = res.list

        this.dialogVisible = true
      }
    },
    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    handleClose() {
      this.dialogForm = {
        'wo_code': '',
        'partnumber': '',
        'partname': '',
        'partspec': '',
        'seq': '',
        'stepcode': '',
        'stepname': '',
        'stepprice': '', // å·¥åºå•ä»·
        'nextstepcode': '',
        'nextstepname': '',
        'nextstepprice': '',
        'stepdesc': '',
        'planqty': 0,
        'startqty': 0, //
        'noreportqty': 0, // æœªæŠ¥æ•°é‡
        'reportqty': 0, // å·²æŠ¥æ•°é‡
        'noputqty': 0, // ä¸è‰¯æ•°é‡
        'wkshopcode': '',
        'wkshopname': '',
        'eqpcode': '',
        'eqpname': '',

        wxcode: '',
        outuser: '',
        fqty: '',
        inuser: '',
        sqty: '',
        list: '',

        remarks: '', // å¤‡æ³¨
        inbarcode: '', // å…¥åº“条码
        defectlist: '', // ä¸è‰¯æ±‡æ€»
        reckway: 'person', // è®¡ä»¶æ–¹å¼(班组:group、个人:person)
        usergroupcode: '', // ç­ç»„编码
        reportuser: [] // æŠ¥å·¥äººå‘˜

      }

      this.defectTableData = []
      this.badTableData = []

      this.$refs.dialogForm.clearValidate()
    },
    // å¯¹è¯æ¡†å–消
    dialogVisibleCancel() {
      this.dialogVisible = false
      this.tabClick()
    },
    // å¯¹è¯æ¡†ç¡®è®¤
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          if (this.activeName === '生产列表') {
            if (this.defectTableData.find(i => i.code.length === 0)) {
              return this.$message.info('缺陷编码/名称不能为空！')
            }
            if (this.defectTableData.find(i => i.badqty.toString().trim() === '' || parseFloat(i.badqty) === 0)) {
              return this.$message.info('不良数量不能为空或为零！')
            }

            if (parseFloat(this.dialogForm.noreportqty) < parseFloat(this.dialogForm.startqty) + parseFloat(this.dialogForm.noputqty)) {
              return this.$message.info('合格数量加不良数量不能大于了未报数量!')
            }
            let inbarcode = ''
            if (this.tableData.find(i => i.id === this.radioSelected).isend === 'Y') {
              const data1 = {
                rightcode: getCookie('ruleCode'),
                partcode: this.dialogForm.partnumber,
                qty: this.dialogForm.startqty,
                onelabqty: this.dialogForm.startqty
              }

              const res1 = await LabelBarCode(data1)
              inbarcode = res1.data[0].labcode
            }

            const defectlist = []
            this.defectTableData.forEach(i => {
              defectlist.push({
                defect_code: i.code.join(','),
                badqty: i.badqty
              })
            })

            const data = {
              mesordercode: this.dialogForm.wo_code,
              partcode: this.dialogForm.partnumber,
              stepseq: this.dialogForm.seq,
              stepcode: this.dialogForm.stepcode,
              stepprice: this.dialogForm.stepprice,
              eqpcode: this.dialogForm.eqpcode,
              inbarcode,
              reckway: this.dialogForm.reckway,
              usergroupcode: this.dialogForm.usergroupcode,
              reportuser: this.dialogForm.reportuser.join(','),
              taskqty: this.dialogForm.planqty,

              payrate: this.dialogForm.reckway === 'person' ? this.reportuserArr.find(i => i.usercode === this.dialogForm.reportuser[0]).payrate : '',
              // startqty: this.dialogForm.startqty,
              // reportqty: this.dialogForm.reportqty,

              startqty: this.dialogForm.startqty,
              reportqty: this.dialogForm.startqty, // æŠ¥å·¥æ•°é‡

              defectlist,
              remarks: ''
            }
            // console.log(JSON.parse(JSON.stringify(this.defectTableData)))
            // console.log(JSON.parse(JSON.stringify(data)))

            this.$store.state.app.buttonIsDisabled = true
            const res = await SavaMesOrderStepReport(data)
            if (res.code === '200') {
              this.$notify.success('报工成功！')
              // await this.search()
              await this.tabClick()
              this.$store.state.app.buttonIsDisabled = false
              this.dialogVisible = false

              // è‡ªåˆ¶æŠ¥å·¥æ‰“印标签口子已开好
              // if (JSON.parse(localStorage.getItem('mesSetting')).every) {
              //   this.dialogVisible2 = true
              //   this.ZZprint2(localStorage.getItem('username'))
              // }
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error('报工失败！')
            }
          }

          if (this.activeName === '外协发料') {
            if (parseFloat(this.dialogForm.fqty) < 1) {
              return this.$message.info('发料数量不能为零！')
            }
            if (parseFloat(this.dialogForm.fqty) > parseFloat(this.dialogForm.noreportqty)) {
              return this.$message.info('发料数量不能大于未发数量!')
            }
            const data = {
              mesordercode: this.dialogForm.wo_code,
              partcode: this.dialogForm.partnumber,
              stepseq: this.dialogForm.seq,
              stepcode: this.dialogForm.stepcode,

              wxcode: this.dialogForm.wxcode,
              outuser: this.dialogForm.outuser,
              taskqty: this.dialogForm.planqty,
              fqty: this.dialogForm.fqty
            }
            // console.log(JSON.stringify(data))

            this.$store.state.app.buttonIsDisabled = true
            const res = await SavaMesOrderStepOut(data)
            if (res.code === '200') {
              this.$notify.success('发料成功！')
              // await this.search()
              await this.tabClick()
              this.$store.state.app.buttonIsDisabled = false
              this.dialogVisible = false
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error('发料失败！')
            }
          }

          if (this.activeName === '外协收料') {
            if (this.defectTableData.find(i => i.code.length === 0)) {
              return this.$message.info('缺陷编码/名称不能为空！')
            }
            if (this.defectTableData.find(i => i.badqty.toString().trim() === '' || parseFloat(i.badqty) === 0)) {
              return this.$message.info('不良数量不能为空或为零！')
            }

            if (parseFloat(this.dialogForm.noreportqty) < parseFloat(this.dialogForm.sqty) + parseFloat(this.dialogForm.noputqty)) {
              return this.$message.info('收料数量加不良数量不能大于了可收数量!')
            }

            if (this.dialogForm.list.find(i => i.Name === this.dialogForm.wxcode)) {
              if (this.dialogForm.list.find(i => i.Name === this.dialogForm.wxcode).acceptQty < parseFloat(this.dialogForm.sqty) + parseFloat(this.dialogForm.noputqty)) {
                return this.$message.info('收料数量加不良数量不能大于该供应商可收数量!')
              }
            } else {
              return this.$message.info('此供应商无可收数量!')
            }

            let inbarcode = ''
            if (this.tableData.find(i => i.id === this.radioSelected).isend === 'Y') {
              const data1 = {
                rightcode: getCookie('ruleCode'),
                partcode: this.dialogForm.partnumber,
                qty: this.dialogForm.startqty,
                onelabqty: this.dialogForm.startqty
              }

              const res1 = await LabelBarCode(data1)
              inbarcode = res1.data[0].labcode
            }
            const defectlist = []
            this.defectTableData.forEach(i => {
              defectlist.push({
                defect_code: i.code.join(','),
                badqty: i.badqty
              })
            })

            const data = {
              mesordercode: this.dialogForm.wo_code,
              partcode: this.dialogForm.partnumber,
              stepseq: this.dialogForm.seq,
              stepcode: this.dialogForm.stepcode,

              wxcode: this.dialogForm.wxcode,
              inbarcode,
              inuser: this.dialogForm.inuser,
              taskqty: this.dialogForm.planqty,
              sqty: this.dialogForm.sqty,
              defectlist,
              remarks: ''
            }
            // console.log(JSON.parse(JSON.stringify(data)), 1)
            this.$store.state.app.buttonIsDisabled = true
            const res = await SavaMesOrderStepIn(data)
            if (res.code === '200') {
              this.$notify.success('收料成功！')
              // await this.search()
              await this.tabClick()
              this.$store.state.app.buttonIsDisabled = false
              this.dialogVisible = false
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error('收料失败！')
            }
          }

          if (this.activeName === '不良待处理') {
            let flag = false
            this.badTableData.forEach(i => {
              if (parseFloat(i.repair_qty) + parseFloat(i.laborbad_qty) + parseFloat(i.materielbad_qty) > parseFloat(i.ng_qty)) {
                flag = true
              }
            })
            if (flag) {
              return this.$message.info('维修合格数量+工废数量+料废数量不能大于不良数量！')
            }
            this.$store.state.app.buttonIsDisabled = true
            const res = await EditOrderNgStepSeave({ Data: this.badTableData })
            if (res.code === '200') {
              this.$notify.success('提交成功！')
              // await this.search()
              await this.tabClick()
              this.$store.state.app.buttonIsDisabled = false
              this.dialogVisible = false
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error('提交失败！')
            }
          }
        }
      })
    },

    dialogVisible2Close() {
      this.qrForm.qrvalue = ''
      this.qrForm.startqty = ''
      this.qrForm.wo_code = ''
      this.qrForm.partcode = ''
      this.qrForm.partname = ''
      this.qrForm.partspec = ''
      this.qrForm.nextstepname = ''
      this.qrForm.operator = ''
      this.qrForm.operatorTime = ''
      // this.$refs.qrCodeDiv2 = ''
    },

    ZZprint2(username) {
      if (this.dialogForm.nextstepcode !== '') {
        this.qrForm.qrvalue = this.dialogForm.wo_code + ';' + this.dialogForm.nextstepcode
      } else {
        this.qrForm.qrvalue = this.dialogForm.inbarcode
      }

      this.qrForm.startqty = this.dialogForm.startqty
      this.qrForm.wo_code = this.dialogForm.wo_code
      this.qrForm.partcode = this.dialogForm.partnumber
      this.qrForm.partname = this.dialogForm.partname
      this.qrForm.nextstepname = this.dialogForm.nextstepname
      this.qrForm.operator = username
      this.qrForm.operatorTime = handleDatetime2(new Date())
      this.$nextTick(() => {
        this.bindQRCode(this.qrForm.qrvalue)
      })
    },
    // ç”ŸæˆäºŒç»´ç 
    bindQRCode(text) {
      new QRCode(this.$refs.qrCodeDiv2, {
        text: text,
        // width: 50,
        width: 60,
        // height: 50,
        height: 60,
        colorDark: '#000', // äºŒç»´ç é¢œè‰²
        colorLight: '#ffffff', // äºŒç»´ç èƒŒæ™¯è‰²
        correctLevel: QRCode.CorrectLevel.L// å®¹é”™çŽ‡ï¼ŒL/M/H
      })
    },
    // ç¼ºé™·æ–°å¢ž
    addDefect() {
      if (this.defectTableData.find(i => i.code.length === 0)) {
        return this.$message.info('缺陷编码/名称不能为空！')
      }
      if (this.defectTableData.find(i => i.badqty.toString().trim() === '' || parseFloat(i.badqty) === 0)) {
        return this.$message.info('不良数量不能为空或为零！')
      }

      this.defectTableData.push({
        uuid: nanoid(), code: [], badqty: ''
      })
    },
    // ç¼ºé™·åˆ é™¤
    defectDel(row) {
      this.defectTableData = this.defectTableData.filter(i => i.uuid !== row.uuid)

      this.dialogForm.noputqty = 0
      this.defectTableData.forEach(i => {
        this.dialogForm.noputqty += parseFloat(i.badqty)
      })
    },
    badqtyChange(val) {
      this.dialogForm.noputqty = 0
      this.defectTableData.forEach(i => {
        this.dialogForm.noputqty += parseFloat(i.badqty)
      })
    },
    reckwayChange(val) {
      // console.log(val)
      this.dialogForm.usergroupcode = ''
      this.dialogForm.reportuser = []
    },
    async usergroupChange(val) {
      const { data: res } = await GroupsPersonPermissions({ groupcode: val })
      this.dialogForm.reportuser = res[0].usercode_list ? res[0].usercode_list.split(',') : []
    },
    rowClick(row, event, column) {
      this.radioSelected = row.id
    },
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 275
        // this.$refs.tableDataRef.doLayout()
      })
    },
    reset() {
      this.form.wkshopcode = ''
      this.form.wocode = ''
      this.form.workOrderCurrentValue = ''
      this.form.partcode = ''
      this.form.partname = ''
      this.form.partspec = ''
      this.search()
    },

    headerCellStyle() {
      return this.$headerCellStyle
    },
    cellStyle() {
      return this.$cellStyle
    }
  }
}
</script>
<style lang="scss" scoped>

::v-deep .elTableDiv .el-radio__label {
  display: none !important;
}

.dialogFormItem {
  margin: 0 10px 0 0;
}

.dialogFormItemDiv {
  width: 200px;
}

::v-deep .el-select__caret {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .el-dialog .el-form-item__label {
  font-weight: lighter !important;
}

::v-deep .el-dialog .el-divider__text {
  font-weight: bolder !important;
}

</style>

 src/views/systemSetting/dataImport.vue

@@ -116,6 +116,7 @@
                  v-if="item.indexOf('编号(唯一)')!==-1||
                    item.indexOf('用户姓名')!==-1||
                    item.indexOf('密码')!==-1||
                    item.indexOf('薪资类型')!==-1||
                    item.indexOf('手机号')!==-1||
                    item.indexOf('邮箱')!==-1||
                    item.indexOf('名称')!==-1||
@@ -957,6 +958,10 @@
        if (!j['*密码']) {
          flag = false
          msg = '*密码'
        }
        if (!j['*薪资类型']) {
          flag = false
          msg = '*薪资类型'
        }
        if (!j['*在职状态']) {
          flag = false
@@ -1846,6 +1851,7 @@
          '*用户编号(唯一)': '',
          '*用户姓名': '',
          '*密码': '',
          '*薪资类型': '',
          '*在职状态': 'Y',
          '手机号': '',
          '邮箱': '',

 src/views/workOrder/produceOrderList.vue

@@ -1,1292 +1,1356 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">



      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button

          v-waves

          icon="el-icon-refresh-right"

          @click="syncERP"

        >同步ERP

        </el-button>

        <div style="display: flex">

          <el-button

            v-waves

            type="primary"

            icon="el-icon-bottom"

            @click="batchHandle"

          >批量下达

          </el-button>

        </div>



      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="车间名称" style=" display: flex;">

              <el-select

                v-model="form.wkshopcode"

                filterable

                :popper-append-to-body="false"

                style="width: 200px"

                placeholder="请选择"

              >

                <el-option

                  v-for="item in wkshopcodeArr"

                  :key="item.torg_code"

                  :label="item.torg_name"

                  :value="item.torg_code"

                />

              </el-select>

            </el-form-item>

            <el-form-item label="订单状态" style=" display: flex;">

              <el-select

                v-model="form.erporderstus"

                filterable

                :popper-append-to-body="false"

                style="width: 200px"

                placeholder="请选择"

              >

                <el-option

                  v-for="item in erporderstusArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>

            <el-form-item label="订单编号" style=" display: flex;">

              <el-input v-model="form.erpordercode" placeholder="请输入" style="width: 200px" />

            </el-form-item>



            <el-form-item label="销售订单" style=" display: flex;">

              <el-input v-model="form.saleordercode" style="width: 200px" placeholder="请输入" />

            </el-form-item>



            <el-form-item v-show="isExpandForm" label="产品编码" style=" display: flex;">

              <el-input v-model="form.partcode" style="width: 200px" placeholder="请输入" />

            </el-form-item>



            <el-form-item v-show="isExpandForm" label="产品名称" style=" display: flex;">

              <el-input v-model="form.partname" style="width: 200px" placeholder="请输入" />

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="产品规格" style=" display: flex;">

              <el-input v-model="form.partspec" style="width: 200px" placeholder="请输入" />

            </el-form-item>



            <DateType

              ref="DateTypeRef"

              :is-expand-form="isExpandForm"

              style="display:flex;justify-content: center;align-items: center;position: relative"

              @DateTypeChange="DateTypeChange"

              @cycleTimeChange="cycleTimeChange"

            />



            <!--            <el-form-item-->

            <!--              v-show="isExpandForm"-->

            <!--              label="预计开工时间"-->

            <!--              label-width="100px"-->

            <!--              style="display: flex;font-size: 14px;align-items: center"-->

            <!--            >-->

            <!--              <el-date-picker-->

            <!--                v-model="form.paystartdate"-->

            <!--                type="datetimerange"-->

            <!--                range-separator="~"-->

            <!--                class="timeMini"-->

            <!--                size="mini"-->

            <!--                style="width: 200px;display: flex;line-height: 34px;height: 34px;"-->

            <!--                :clearable="false"-->

            <!--                start-placeholder="开始日期"-->

            <!--                end-placeholder="结束日期"-->

            <!--                :picker-options="pickerOptions"-->

            <!--                value-format="yyyy-MM-dd"-->

            <!--                @change="pickerChange"-->

            <!--              />-->

            <!--            </el-form-item>-->



            <!--            <el-form-item-->

            <!--              v-show="isExpandForm"-->

            <!--              label="预计完工时间"-->

            <!--              label-width="100px"-->

            <!--              style=" display: flex;font-size: 14px;align-items: center"-->

            <!--            >-->

            <!--              <el-date-picker-->

            <!--                v-model="form.payenddate"-->

            <!--                type="daterange"-->

            <!--                :clearable="false"-->

            <!--                class="timeMini"-->

            <!--                range-separator="~"-->

            <!--                start-placeholder="开始日期"-->

            <!--                style="width: 200px;display: flex;line-height: 34px ;height: 34px ;"-->

            <!--                end-placeholder="结束日期"-->

            <!--                size="mini"-->

            <!--              />-->

            <!--            </el-form-item>-->

          </div>



          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>



        </el-form>



        <div

          class="bodyTopFormExpand"

        >

          <svg-icon

            v-show="mouseHoverType==='mouseout'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"

            @mouseenter="mouseHoverType=$event.type"

          />

          <svg-icon

            v-show="mouseHoverType==='mouseenter'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"

            @click="isExpandForm=!isExpandForm"

            @mouseout="mouseHoverType=$event.type"

          />

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"

          border

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          :summary-method="getSummaries"

          show-summary

          @sort-change="sortChange"

          @selection-change="handleSelectionChange"

        >

          <!--          @row-click="rowClick"-->

          <el-table-column

            type="selection"

            width="50"

            :selectable="selected"

          />

          <!--          <el-table-column-->

          <!--            width="50"-->

          <!--            fixed-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <el-radio-->

          <!--                v-model="radioSelectedId"-->

          <!--                :label="row.id"-->

          <!--                style="color: transparent;padding-left: 10px;"-->

          <!--              />-->

          <!--              &lt;!&ndash;              @change.native="getCurrentRow(row.id)"&ndash;&gt;-->

          <!--            </template>-->

          <!--          </el-table-column>-->

          <el-table-column

            prop="rowNum"

            width="50"

            fixed

            label="序号"

          />

          <el-table-column

            prop="status"

            label="订单状态"

            sortable="custom"

            width="110"

            show-tooltip-when-overflow

          >

            <template slot-scope="{row}">

              <div v-if="row.status==='NEW'">新订单</div>

              <div v-if="row.status==='CREATING'">部分下达</div>

              <div v-if="row.status==='CREATED'">全部下达</div>

              <div v-if="row.status==='CLOSED'">已关闭</div>

            </template>

          </el-table-column>

          <el-table-column

            prop="wo"

            label="订单编号"

            show-tooltip-when-overflow

            sortable="custom"

            min-width="150"

          />

          <el-table-column

            show-tooltip-when-overflow

            prop="saleOrderCode"

            label="销售订单"

            sortable="custom"

            width="150"

          >

            <template slot-scope="{row}">

              <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>

          <el-table-column

            prop="partcode"

            label="产品编码"

            sortable="custom"

            show-tooltip-when-overflow

            min-width="150"

          />

          <el-table-column

            prop="partname"

            label="产品名称"

            sortable="custom"

            min-width="200"

            show-tooltip-when-overflow

          />

          <el-table-column

            prop="partspec"

            label="产品规格"

            sortable="custom"

            show-tooltip-when-overflow

            min-width="110"

          >

            <template slot-scope="{row}">

              <div v-if="row.partspec">{{ row.partspec }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>

          <el-table-column

            prop="qty"

            label="订单数量"

            width="150"

            show-tooltip-when-overflow

            sortable="custom"

          />

          <el-table-column

            prop="relse_qty"

            label="已下单数量"

            show-tooltip-when-overflow

            width="150"

            sortable="custom"

          />

          <el-table-column

            prop="clerkuser"

            label="销售业务员"

            show-tooltip-when-overflow

            width="150"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <div v-if="row.clerkuser">{{ row.clerkuser }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>

          <el-table-column

            prop="wkshp_name"

            label="生产车间"

            show-tooltip-when-overflow

            sortable="custom"

            width="150"

          >

            <template slot-scope="{row}">

              <div v-if="row.wkshp_name">{{ row.wkshp_name }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>

          <!--          <el-table-column-->

          <!--            prop="planstartdate"-->

          <!--            show-tooltip-when-overflow-->

          <!--            label="预计开工时间"-->

          <!--            sortable="custom"-->

          <!--            width="130"-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <div v-if="row.planstartdate">{{ row.planstartdate.substring(0, 11) }}</div>-->

          <!--              <div v-else>/</div>-->

          <!--            </template>-->

          <!--          </el-table-column>-->

          <!--          <el-table-column-->

          <!--            prop="planenddate"-->

          <!--            label="预计完工时间"-->

          <!--            show-tooltip-when-overflow-->

          <!--            sortable="custom"-->

          <!--            width="130"-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <div v-if="row.planenddate">{{ row.planenddate.substring(0, 11) }}</div>-->

          <!--              <div v-else>/</div>-->

          <!--            </template>-->

          <!--          </el-table-column>-->

          <el-table-column

            prop="planenddate"

            label="预计开工日期"

            sortable="custom"

            show-tooltip-when-overflow

            width="130"

          >

            <template slot-scope="{row}">

              <div v-if="row.planenddate">{{ row.planenddate.substring(0, 11) }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>



          <el-table-column

            prop="planstartdate"

            label="预计完工日期"

            sortable="custom"

            show-tooltip-when-overflow

            width="130"

          >

            <template slot-scope="{row}">

              <div v-if="row.planstartdate">{{ row.planstartdate.substring(0, 11) }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>



          <el-table-column

            prop="saleOrderDeliveryDate"

            label="预计交付日期"

            sortable="custom"

            show-tooltip-when-overflow

            width="130"

          >

            <template slot-scope="{row}">

              <div v-if="row.saleOrderDeliveryDate">{{ row.saleOrderDeliveryDate.substring(0, 11) }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>



          <el-table-column

            show-tooltip-when-overflow

            prop="createuser"

            label="创建人员"

            sortable="custom"

            width="150"

          >

            <template slot-scope="{row}">

              <div v-if="row.createuser">{{ row.createuser }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>

          <el-table-column

            prop="createdate"

            label="创建时间"

            width="130"

            show-tooltip-when-overflow

            sortable="custom"

          >

            <template slot-scope="{row}">

              <div v-if="row.createdate">{{ row.createdate.substring(0, 11) }}</div>

              <div v-else>/</div>

            </template>

          </el-table-column>

          <el-table-column

            label="操作"

            fixed="right"

            width="120"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="下达" placement="top">

                  <!--                <el-button v-waves type="text" @click="edit('edit',row)">下达</el-button>-->

                  <i

                    class="el-icon-bottom"

                    :style="{color:$store.state.settings.theme}"

                    style="cursor: pointer;margin-left: 5px"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="订单关闭" placement="top">

                  <i

                    class="el-icon-switch-button"

                    :style="{color:$store.state.settings.theme}"

                    style="cursor: pointer;margin-left: 15px"

                    @click="orderClose(row.id)"

                  />

                </el-tooltip>



                <el-tooltip v-del-tab-index class="item" effect="dark" content="订单删除" placement="top">

                  <i

                    class="el-icon-delete"

                    :style="{color:$store.state.settings.theme}"

                    style="cursor: pointer;margin-left: 15px"

                    @click="orderDel(row.id)"

                  />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes,jumper"

        popper-class="select_bottom"

        @pagination="getErpOrderSearch"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'下达'"

      :visible.sync="dialogVisible"

      width="900px"

      top="12vh"

      :close-on-click-modal="false"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="106px">

        <el-form-item label="订单编号" prop="erpordercode">

          <el-input v-model="dialogForm.erpordercode" disabled style="width: 200px" />

        </el-form-item>

        <el-form-item label="产品编码" prop="partcode">

          <el-input v-model="dialogForm.partcode" disabled style="width: 200px" />

        </el-form-item>

        <el-form-item label="产品名称" prop="partname">

          <el-input v-model="dialogForm.partname" disabled style="width: 200px" />

        </el-form-item>



        <el-form-item label="产品规格" prop="partspec">

          <el-input v-model="dialogForm.partspec" disabled style="width: 200px" />

        </el-form-item>

        <el-form-item label="生产车间" prop="wkshopname">

          <el-input v-model="dialogForm.wkshopname" disabled style="width: 200px" />

        </el-form-item>

        <el-form-item label="所属仓库" prop="warehousename">

          <el-input v-model="dialogForm.warehousename" disabled style="width: 200px" />

        </el-form-item>

        <el-form-item label="订单数量" prop="erpqty">

          <el-input v-model="dialogForm.erpqty" disabled style="width: 200px" />

        </el-form-item>

        <el-form-item label="已下单数" prop="relse_qty">

          <el-input

            v-model="dialogForm.relse_qty"

            disabled

            oninput="value=value.replace(/[^0-9.]/g,'')"

            style="width: 200px"

          />

        </el-form-item>

        <el-form-item label="下单数量" prop="markqty">

          <el-input

            v-model="dialogForm.markqty"

            oninput="value=value.replace(/[^0-9.]/g,'')"

            style="width: 200px"

          />

        </el-form-item>

        <el-form-item label="下单单数" prop="ordernum">

          <el-input

            v-model="dialogForm.ordernum"

            oninput="value=value.replace(/[^0-9.]/g,'')"

            style="width: 200px"

          />

        </el-form-item>



        <el-form-item label="销售业务员" prop="">

          <el-input

            v-model="dialogForm.clerkuser"

            disabled

            style="width: 200px"

          />

        </el-form-item>

        <!--        :picker-options="pickerOptions"-->



        <el-form-item label="预计交付日期" prop="saleOrderDeliveryDate">

          <el-date-picker

            v-model="dialogForm.saleOrderDeliveryDate"

            type="date"

            size="mini"

            :clearable="false"

            class="dateMini"

            format="yyyy-MM-dd"

            style="width: 200px"

            placeholder="选择日期"

            :disabled="dialogForm.saleOrderDeliveryDateIsDisabled"

          />

        </el-form-item>



        <div style="display: flex">

          <el-form-item label="预计开工日期" prop="" style="display: flex">

            <el-date-picker

              v-model="dialogForm.paystartdate"

              type="date"

              size="mini"

              style="width: 200px"

              :clearable="false"

              class="dateMini"

              format="yyyy-MM-dd"

              value-format="yyyy-MM-dd"

              placeholder="选择日期"

            />

          </el-form-item>



          <el-form-item label="预计完工日期" prop="" style="display: flex">

            <el-date-picker

              v-model="dialogForm.payenddate"

              type="date"

              size="mini"

              style="width: 200px"

              :clearable="false"

              class="dateMini"

              format="yyyy-MM-dd"

              value-format="yyyy-MM-dd"

              placeholder="选择日期"

            />

          </el-form-item>



        </div>



      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >下 è¾¾</el-button>

        </div>

      </span>

    </el-dialog>

  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import { handleDatetime } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import {

  ClosedErpOrder,

  DeleteErpOrder,

  ErpOrderSearch,

  MarkBatchSaveErpOrder,

  MarkSaveErpOrder

} from '@/api/WorkOrder'

import { SeaveSearchErpOrder } from '@/api/ErpSyncMes'

import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'

import DateType from '@/components/DateType'



const SER_HZ = /^[\u4e00-\u9fa5]+$/

export default {

  name: 'ProduceOrderList',

  components: {

    Pagination, DateType

  },

  directives: { elDragDialog, waves },

  data() {

    const validateName = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('请输入编码'))

      } else {

        if (SER_HZ.test(value)) {

          return callback(new Error('编码不能为中文'))

        } else {

          callback()

        }

      }

    }

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      form: {

        wkshopcode: '', // è½¦é—´ç¼–码

        erporderstus: '', // è®¢å•çŠ¶æ€ç 

        erpordercode: '', // è®¢å•ç¼–号

        partcode: '', // äº§å“ç¼–码

        partname: '', // äº§å“åç§°

        partspec: '', // äº§å“è§„æ ¼

        creatuser: '', // åˆ›å»ºäººå‘˜

        saleordercode: '', // é”€å”®è®¢å•

        // paystartdate: '', // äº¤ä»˜æ—¶é—´

        paystartdate: '', // é¢„计开工时间

        payenddate: '', // é¢„计完工时间

        createdate: '', // åˆ›å»ºæ—¶é—´



        datatype: 'ED', // æ—¶é—´ç±»åž‹

        timeValue: [], // æ—¶é—´å€¼



        prop: 'wo', // æŽ’序字段

        order: 'desc', // æŽ’序字段

        page: 1, // ç¬¬å‡ é¡µ

        rows: 20 // æ¯é¡µå¤šå°‘条

      },



      erporderstusArr: [

        { code: 'NEW', name: '新订单' },

        { code: 'CREATING', name: '部分下达' },

        { code: 'CREATED', name: '全部下达' },

        { code: 'CLOSED', name: '已关闭' }

      ],

      wkshopcodeArr: [],

      total: 10,

      radioSelectedId: '',

      tableData: [],

      dialogVisible: false,

      dialogForm: {

        erporderid: '', // è®¢å•id

        sbid: '', // è®¢å•æ˜Žç»†id

        erpordercode: '', // è®¢å•ç¼–号

        saleordercode: '', // é”€å”®è®¢å•



        partcode: '', // äº§å“ç¼–码

        partname: '', // äº§å“åç§°

        partspec: '', // äº§å“è§„æ ¼



        wkshopcode: '', // è½¦é—´ç¼–码

        wkshopname: '', // è½¦é—´åç§°



        warehousecode: '', // ä»“库编码

        warehousename: '', // ä»“库名称



        erpqty: '', // è®¢å•æ•°é‡

        markqty: '', // ä¸‹å•æ•°é‡

        ordernum: '', // ä¸‹å•å•æ•°

        relse_qty: '', // å·²ä¸‹å•æ•°é‡



        clerkuser: '', // é”€å”®ä¸šåŠ¡å‘˜



        saleOrderDeliveryDate: '', // é¢„计交付日期



        paystartdate: '', //   é¢„计开工日期

        payenddate: ''//  é¢„计完工日期

      },

      operation: '',

      dialogFormRules: {

        // OrgType: [

        //   { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] }

        // ],

        // OrgCode: [

        //   { required: true, validator: validateName, trigger: ['blur', 'change'] }

        // ],

        markqty: [

          { required: true, message: '请输入下单数量', trigger: ['blur', 'change'] }

        ],

        ordernum: [

          { required: true, message: '请输入下单单数', trigger: ['blur', 'change'] }

        ],

        saleOrderDeliveryDate: [

          { required: true, message: '请选择预计交付日期', trigger: ['blur', 'change'] }

        ]



      },

      pickerOptions: {

        disabledDate(time) {

          return time.getTime() < Date.now() - 8.64e7

        }

      },

      multipleSelection: []



      // expireTimeOption: {

      //   disabledDate(time) {

      //     return time.getTime() > Date.now() - 8.64e6 // å¦‚果没有后面的-8.64e6就是不可以选择今天的

      //   }

      // }



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getErpOrderSearch()

    // this.getPartSelect()// èŽ·å–产品编码信息



    this.getPrentOrganizationNoCompany()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {



    DateTypeChange(value) {

      this.form.datatype = value

    },

    cycleTimeChange(val) {

      this.form.timeValue = val

    },



    pickerChange(value) {

      console.log(value, 123)

      this.cycleTime = null

    },



    async getPrentOrganizationNoCompany() {

      const { data: res } = await PrentOrganizationNoCompany()

      this.wkshopcodeArr = res

    },

    async getErpOrderSearch() {

      console.log(this.form, 1)

      // let tempDate2 = this.form.paystartdate

      // if (tempDate2.length > 0) {

      //   tempDate2 = handleDatetime(tempDate2[0]) + '~' + handleDatetime(tempDate2[1])

      // }

      //

      // let tempDate = this.form.payenddate

      // if (tempDate.length > 0) {

      //   tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])

      // }



      const data = {



        erporderstus: this.form.erporderstus, // è®¢å•çŠ¶æ€ç 

        wkshopcode: this.form.wkshopcode, // è½¦é—´ç¼–码

        erpordercode: this.form.erpordercode, // è®¢å•ç¼–号

        saleordercode: this.form.saleordercode, // é”€å”®å•å·



        partcode: this.form.partcode, // äº§å“ç¼–码

        partname: this.form.partname, // äº§å“åç§°

        partspec: this.form.partspec, // äº§å“è§„æ ¼



        datatype: this.form.datatype, // æ—¥æœŸç±»åž‹(计划开工(PS)、计划完工(PE)、预计交付(ED))

        searchdate: this.form.timeValue.join('~'), // æ—¶é—´æ®µ

        // paystartdate: tempDate2, // äº¤ä»˜æ—¶é—´

        // payenddate: tempDate, // äº¤ä»˜æ—¶é—´



        creatuser: this.form.creatuser, // åˆ›å»ºäººå‘˜



        prop: this.form.prop, // æŽ’序字段

        order: this.form.order, // æŽ’序字段

        page: this.form.page, // ç¬¬å‡ é¡µ

        rows: this.form.rows // æ¯é¡µå¤šå°‘条



      }



      const res = await ErpOrderSearch(data)

      this.tableData = res.data

      this.total = res.count

    },

    // æŽ’序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getErpOrderSearch()

    },

    // åŒæ­¥ERP

    syncERP() {

      const loading = this.$loading({

        lock: true,

        text: '正在同步ERP，请稍等...',

        spinner: 'el-icon-loading',

        customClass: 'osloading',

        background: 'rgba(0, 0, 0, 0.7)'

      })



      SeaveSearchErpOrder().then(res => {

        console.log(res, 11)

        if (res.code === '200') {

          setTimeout(() => {

            this.getErpOrderSearch()

            loading.close()

            this.$message.success('同步成功！')

          }, 2000)

        }

        // else if (res.code === '300') {

        //   setTimeout(() => {

        //     loading.close()

        //     this.$message.error('同步失败！')

        //   }, 10000)

        // }

      }).catch(e => {

        loading.close()

      })

    },

    // æŸ¥è¯¢

    search() {

      this.getErpOrderSearch()

    },

    // é‡ç½®

    reset() {

      this.form.wkshopcode = ''

      this.form.erporderstus = ''

      this.form.erpordercode = ''

      this.form.partcode = ''

      this.form.partname = ''

      this.form.partspec = ''

      this.form.paystartdate = ''

      this.form.payenddate = ''

      this.form.creatuser = ''

      this.form.saleordercode = ''

      this.form.createdate = ''



      this.form.timeValue = []

      this.cycleTime = null



      this.$refs.DateTypeRef.clearValue()



      this.getErpOrderSearch()

    },

    // å•é€‰æ¡†é€‰ä¸­èŽ·å–当前行信息

    // getCurrentRow(id) {

    //   this.radioSelectedId = id

    // },

    // rowClick(row) {

    //   this.radioSelectedId = row.id

    // },



    // è®¢å•åˆ é™¤

    orderDel(id) {

      this.tableData.forEach(item => {

        if (item.id === id) {

          if (item.status === 'CLOSED') {

            return this.$message.info('此订单已关闭，无法删除！')

          } else {

            this.$confirm('是否确认关闭订单?', '提示', {

              confirmButtonText: '确定',

              cancelButtonText: '取消',

              type: 'warning'

            }).then(() => {

              DeleteErpOrder({ erpordercode: item.wo, erporderid: id }).then(res => {

                if (res.code === '200') {

                  this.$message.success('订单删除成功!')

                  this.getErpOrderSearch()

                }

              })

            }).catch(() => {

              this.$message.info('已取消删除！')

            })

          }

        }

      })

    },

    // è®¢å•å…³é—­

    async orderClose(id) {

      this.tableData.forEach(item => {

        if (item.id === id) {

          if (item.status !== 'NEW') {

            return this.$message.info('此订单非新订单，无法关闭！')

          } else {

            this.$confirm('是否确认关闭订单?', '提示', {

              confirmButtonText: '确定',

              cancelButtonText: '取消',

              type: 'warning'

            }).then(() => {

              ClosedErpOrder({ erpordercode: item.wo, erporderid: id }).then(res => {

                if (res.code === '200') {

                  this.$message.success('订单关闭成功!')

                  this.getErpOrderSearch()

                }

              })

            }).catch(() => {

              this.$message.info('已取消关闭！')

            })

          }

        }

      })

    },

    batchHandle() {

      this.$confirm('是否批量下达?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        if (this.multipleSelection.length === 0) {

          return this.$message.info('请先选择订单！')

        }

        // console.log(JSON.parse(JSON.stringify(this.multipleSelection)))

        const data = []

        this.multipleSelection.forEach(i => {

          data.push({

            'erporderid': i.id,

            'sbid': i.sbid,

            'erpordercode': i.wo,

            'partcode': i.partcode,

            'wkshopcode': i.wkshp_code,

            'warehousecode': i.stck_code,

            'erpqty': i.qty,

            'markqty': i.qty,

            'ordernum': 1,

            'clerkuser': i.clerkuser,

            'relse_qty': i.qty,

            'saleordercode': i.saleOrderCode,

            // 'saleOrderDeliveryDate': i.saleOrderDeliveryDate

            'saleOrderDeliveryDate': handleDatetime(new Date()) + ' 00:00:00',



            'paystartdate': i.planstartdate,

            'payenddate': i.planenddate

          })

        })

        // console.log(JSON.parse(JSON.stringify(data)))

        MarkBatchSaveErpOrder(data).then(res => {

          if (res.code === '200') {

            this.multipleSelection = []

            this.$message.success('批量下达成功！')

            this.getErpOrderSearch()

          } else {

            this.$message.error('批量下达失败！')

          }

        })

      }).catch(() => {

        this.$message.info('已取消下达！')

      })

    },

    selected(row, index) {

      return row.status === 'NEW'

    },

    handleSelectionChange(val) {

      this.multipleSelection = val

    },

    // æ–°å¢žæŒ‰é’®

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

    },

    // ä¿®æ”¹æŒ‰é’®

    edit(operation, row) {

      if (parseFloat(row.qty) === parseFloat(row.relse_qty) || row.status === 'CLOSED') {

        return this.$message.info('此工单已全部下达！')

      }



      this.operation = operation

      this.dialogVisible = true



      this.$nextTick(() => {

        this.dialogForm.sbid = row.sbid

        this.dialogForm.erporderid = row.id

        this.dialogForm.erpordercode = row.wo

        this.dialogForm.saleordercode = row.saleOrderCode



        this.dialogForm.partcode = row.partcode

        this.dialogForm.partname = row.partname

        this.dialogForm.partspec = row.partspec



        this.dialogForm.wkshopcode = row.wkshp_code

        this.dialogForm.wkshopname = row.wkshp_name



        this.dialogForm.warehousecode = row.stck_code

        this.dialogForm.warehousename = row.stck_name



        this.dialogForm.saleOrderDeliveryDate = row.saleOrderDeliveryDate



        this.dialogForm.erpqty = row.qty

        this.dialogForm.markqty = parseFloat(row.qty) - parseFloat(row.relse_qty)

        this.dialogForm.ordernum = 1

        this.dialogForm.relse_qty = row.relse_qty

        this.dialogForm.clerkuser = row.clerkuser



        this.dialogForm.paystartdate = row.planstartdate

        this.dialogForm.payenddate = row.planenddate

      })

    },

    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶

    handleClose() {

      this.dialogForm = {

        erporderid: '', // è®¢å•id

        sbid: '', // è®¢å•æ˜Žç»†id

        erpordercode: '', // è®¢å•ç¼–号

        saleordercode: '', // é”€å”®è®¢å•



        partcode: '', // äº§å“ç¼–码

        partname: '', // äº§å“åç§°

        partspec: '', // äº§å“è§„æ ¼



        wkshopcode: '', // è½¦é—´ç¼–码

        wkshopname: '', // è½¦é—´åç§°



        warehousecode: '', // ä»“库编码

        warehousename: '', // ä»“库名称



        erpqty: '', // è®¢å•æ•°é‡

        markqty: '', // ä¸‹å•æ•°é‡

        ordernum: '', // ä¸‹å•å•æ•°

        relse_qty: '', // å·²ä¸‹å•æ•°é‡



        payenddate: '', // é¢„计完工日期

        paystartdate: '', // é¢„计开工日期



        saleOrderDeliveryDate: '' // é¢„计交付日期

      }

      this.$refs.dialogForm.clearValidate()

    },

    // å¯¹è¯æ¡†å–消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // å¯¹è¯æ¡†ç¡®è®¤

    dialogVisibleConfirm() {

      this.dialogForm.markqty = parseFloat(this.dialogForm.markqty)

      this.dialogForm.erpqty = parseFloat(this.dialogForm.erpqty)

      this.dialogForm.relse_qty = parseFloat(this.dialogForm.relse_qty)

      this.dialogForm.ordernum = parseFloat(this.dialogForm.ordernum)

      if (this.dialogForm.markqty < 1 || this.dialogForm.markqty > this.dialogForm.erpqty - this.dialogForm.relse_qty) {

        return this.$message.info('下单数量超出可下单数的范围！')

      }



      if (this.dialogForm.ordernum < 1 || this.dialogForm.ordernum > this.dialogForm.markqty) {

        return this.$message.info('下单单数超出可下单单数的范围！')

      }



      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          const data = {

            'sbid': this.dialogForm.sbid,

            'erporderid': this.dialogForm.erporderid,

            'erpordercode': this.dialogForm.erpordercode,

            'saleordercode': this.dialogForm.saleordercode,

            'partcode': this.dialogForm.partcode,

            'wkshopcode': this.dialogForm.wkshopcode,

            'warehousecode': this.dialogForm.warehousecode,

            'clerkuser': this.dialogForm.clerkuser,

            'erpqty': this.dialogForm.erpqty,

            'markqty': this.dialogForm.markqty,

            'ordernum': this.dialogForm.ordernum,

            'payenddate': this.dialogForm.payenddate,

            'paystartdate': this.dialogForm.paystartdate,

            'relse_qty': this.dialogForm.relse_qty,

            'saleOrderDeliveryDate': handleDatetime(this.dialogForm.saleOrderDeliveryDate) + ' 00:00:00'

          }



          MarkSaveErpOrder(data).then(res => {

            if (res.code === '200') {

              this.dialogVisible = false

              this.$message.success('下达成功！')

              this.getErpOrderSearch()

              this.$store.state.app.buttonIsDisabled = false

            } else {

              this.$message.error('下达失败！')

            }

          })

        }

      })

    },

    // èŽ·å–页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 250



        this.$refs.tableDataRef.doLayout()

      })

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    },

    getSummaries(param) {

      const { columns, data } = param

      const sums = []

      const i = 7

      columns.forEach((column, index) => {

        if (index === i) {

          sums[index] = '总数'

          return

        }

        const values = data.map(item => Number(item[column.property]))

        if (column.property === 'qty') {

          sums[index] = values.reduce((prev, curr) => {

            const value = Number(curr)

            if (!isNaN(value)) {

              return prev + curr

              // return Math.round(prev * 100) / 100 + Math.round(curr * 100) / 100

            }

          }, 0)



          sums[index] += ' å•'

        }

        if (column.property === 'relse_qty') {

          sums[index] = values.reduce((prev, curr) => {

            const value = Number(curr)

            if (!isNaN(value)) {

              return prev + curr

              // return Math.round(prev * 100) / 100 + Math.round(curr * 100) / 100

            }

          }, 0)



          sums[index] += ' å•'

        }

      })



      this.$nextTick(() => {

        this.$refs.tableDataRef.doLayout()

      })

      return sums

    }

  }

}

</script>



<!--公共页面样式-->

<style lang="scss" scoped>

$main_color: #42b983;



::v-deep .el-range__icon {

  line-height: 28px !important;

}



::v-deep .el-range-separator {

  line-height: 28px !important;

}



::v-deep .el-range-input {

  font-size: 14px;

}



::v-deep .el-range-separator {

  display: flex;

  justify-content: center;

  align-items: center;

}



.el-icon-share, .el-icon-delete, .el-icon-edit-outline {

  color: $main_color;

  cursor: pointer;

}



.el-icon-edit-outline {

  margin-right: 15px;

}



//::v-deep .el-button--primary, .el-button--default, .el-button--info {

//  height: 34px;

//  display: flex;

//  align-items: center;

//  padding: 0 15px;

//}



::v-deep .el-button--primary {

  //background-color: $main_color !important;

}



::v-deep .el-button--default {

  background-color: #f8f8fa;

  border: none;

}



::v-deep .el-input__inner {

  height: 34px;

  line-height: 34px;

  //color: #a7a7a7;

}



::v-deep .el-dialog__body {

  padding: 20px 100px !important;

}



::v-deep .dialogVisibleRoles .el-dialog__body {

  padding: 20px 20px !important;

}



::v-deep .importPickerClass .el-dialog__body {

  padding: 20px 20px !important;

}



::v-deep .el-dialog__footer {

  display: flex;

  justify-content: flex-end;

}



::v-deep .el-table .caret-wrapper {

  transform: scale(0.8);

}



::v-deep .cell {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



::v-deep .el-table::before {

  height: 0;

}



::v-deep .el-table__body-wrapper {

  background-color: #f8f8fa;

}



::v-deep .el-table__body .el-table__row.hover-row td {

  background-color: #eaecef;

}



::v-deep .el-form--inline .el-form-item__label {

  color: #a7a7a7;

}



.body ::v-deep .el-divider {

  border: 1px solid #eee;

  width: 99%;

  margin: 10px auto;

}



.body ::v-deep .el-form-item {

  margin-bottom: 0;

}



.userDialogVisible ::v-deep .el-form-item {

  margin-bottom: 0;

}



.elTableDiv {

  ::v-deep .el-radio__label {

    display: none;

  }

}



.tableFixed {

  ::v-deep .el-table__fixed-right {

    height: 100% !important;

  }



  ::v-deep .el-table__fixed {

    height: 100% !important;

  }

}



.dateMini {

  ::v-deep .el-input__inner {

    line-height: 34px;

    height: 34px;

    width: 200px;

    display: flex;

    font-size: 14px !important;

    align-items: center !important;

  }



  ::v-deep .el-input__prefix {

    margin-top: -3px;

  }

}



::v-deep .el-icon-delete {

  cursor: pointer;

  margin-right: 0px !important;

}

</style>

<style>

.el-table .custom-row {

  background: #f8f8fa;

}



.osloading {

  font-size: 26px !important;

}



.el-loading-text {

  font-size: 26px !important;

}



.el-picker-panel__footer {

  display: flex !important;

  justify-content: flex-end !important;

}



</style>



<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button
          v-waves
          icon="el-icon-refresh-right"
          @click="syncERP"
        >同步ERP
        </el-button>
        <div style="display: flex">
          <el-button
            v-waves
            type="primary"
            icon="el-icon-bottom"
            @click="batchHandle"
          >批量下达
          </el-button>
        </div>

      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="车间名称" style=" display: flex;">
              <el-select
                v-model="form.wkshopcode"
                filterable
                :popper-append-to-body="false"
                style="width: 200px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in wkshopcodeArr"
                  :key="item.torg_code"
                  :label="item.torg_name"
                  :value="item.torg_code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="订单状态" style=" display: flex;">
              <el-select
                v-model="form.erporderstus"
                filterable
                :popper-append-to-body="false"
                style="width: 200px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in erporderstusArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="订单编号" style=" display: flex;">
              <el-input v-model="form.erpordercode" placeholder="请输入" style="width: 200px" />
            </el-form-item>

            <el-form-item label="销售订单" style=" display: flex;">
              <el-input v-model="form.saleordercode" style="width: 200px" placeholder="请输入" />
            </el-form-item>

            <el-form-item v-show="isExpandForm" label="产品编码" style=" display: flex;">
              <el-input v-model="form.partcode" style="width: 200px" placeholder="请输入" />
            </el-form-item>

            <el-form-item v-show="isExpandForm" label="产品名称" style=" display: flex;">
              <el-input v-model="form.partname" style="width: 200px" placeholder="请输入" />
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="产品规格" style=" display: flex;">
              <el-input v-model="form.partspec" style="width: 200px" placeholder="请输入" />
            </el-form-item>

            <DateType
              ref="DateTypeRef"
              :is-expand-form="isExpandForm"
              style="display:flex;justify-content: center;align-items: center;position: relative"
              @DateTypeChange="DateTypeChange"
              @cycleTimeChange="cycleTimeChange"
            />

            <!--            <el-form-item-->
            <!--              v-show="isExpandForm"-->
            <!--              label="预计开工时间"-->
            <!--              label-width="100px"-->
            <!--              style="display: flex;font-size: 14px;align-items: center"-->
            <!--            >-->
            <!--              <el-date-picker-->
            <!--                v-model="form.paystartdate"-->
            <!--                type="datetimerange"-->
            <!--                range-separator="~"-->
            <!--                class="timeMini"-->
            <!--                size="mini"-->
            <!--                style="width: 200px;display: flex;line-height: 34px;height: 34px;"-->
            <!--                :clearable="false"-->
            <!--                start-placeholder="开始日期"-->
            <!--                end-placeholder="结束日期"-->
            <!--                :picker-options="pickerOptions"-->
            <!--                value-format="yyyy-MM-dd"-->
            <!--                @change="pickerChange"-->
            <!--              />-->
            <!--            </el-form-item>-->

            <!--            <el-form-item-->
            <!--              v-show="isExpandForm"-->
            <!--              label="预计完工时间"-->
            <!--              label-width="100px"-->
            <!--              style=" display: flex;font-size: 14px;align-items: center"-->
            <!--            >-->
            <!--              <el-date-picker-->
            <!--                v-model="form.payenddate"-->
            <!--                type="daterange"-->
            <!--                :clearable="false"-->
            <!--                class="timeMini"-->
            <!--                range-separator="~"-->
            <!--                start-placeholder="开始日期"-->
            <!--                style="width: 200px;display: flex;line-height: 34px ;height: 34px ;"-->
            <!--                end-placeholder="结束日期"-->
            <!--                size="mini"-->
            <!--              />-->
            <!--            </el-form-item>-->
          </div>

          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>

        </el-form>

        <div
          class="bodyTopFormExpand"
        >
          <svg-icon
            v-show="mouseHoverType==='mouseout'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
            @mouseenter="mouseHoverType=$event.type"
          />
          <svg-icon
            v-show="mouseHoverType==='mouseenter'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
            @click="isExpandForm=!isExpandForm"
            @mouseout="mouseHoverType=$event.type"
          />
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          :summary-method="getSummaries"
          show-summary
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
        >
          <!--          @row-click="rowClick"-->
          <el-table-column
            type="selection"
            width="50"
            :selectable="selected"
          />
          <!--          <el-table-column-->
          <!--            width="50"-->
          <!--            fixed-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <el-radio-->
          <!--                v-model="radioSelectedId"-->
          <!--                :label="row.id"-->
          <!--                style="color: transparent;padding-left: 10px;"-->
          <!--              />-->
          <!--              &lt;!&ndash;              @change.native="getCurrentRow(row.id)"&ndash;&gt;-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            prop="rowNum"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="status"
            label="订单状态"
            sortable="custom"
            width="110"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
              <div v-if="row.status==='NEW'">新订单</div>
              <div v-if="row.status==='CREATING'">部分下达</div>
              <div v-if="row.status==='CREATED'">全部下达</div>
              <div v-if="row.status==='CLOSED'">已关闭</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="wo"
            label="订单编号"
            show-tooltip-when-overflow
            sortable="custom"
            min-width="150"
          />
          <el-table-column
            show-tooltip-when-overflow
            prop="saleOrderCode"
            label="销售订单"
            sortable="custom"
            width="150"
          >
            <template slot-scope="{row}">
              <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="partcode"
            label="产品编码"
            sortable="custom"
            show-tooltip-when-overflow
            min-width="150"
          />
          <el-table-column
            prop="partname"
            label="产品名称"
            sortable="custom"
            min-width="200"
            show-tooltip-when-overflow
          />
          <el-table-column
            prop="partspec"
            label="产品规格"
            sortable="custom"
            show-tooltip-when-overflow
            min-width="110"
          >
            <template slot-scope="{row}">
              <div v-if="row.partspec">{{ row.partspec }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="qty"
            label="订单数量"
            width="150"
            show-tooltip-when-overflow
            sortable="custom"
          />
          <el-table-column
            prop="relse_qty"
            label="已下单数量"
            show-tooltip-when-overflow
            width="150"
            sortable="custom"
          />
          <el-table-column
            prop="priuserdefnvc1"
            label="客户名称"
            width="110"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.priuserdefnvc1 ? row.priuserdefnvc1 : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="priuserdefnvc6"
            label="客户编码"
            width="110"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.priuserdefnvc6 ? row.priuserdefnvc6 : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="priuserdefnvc2"
            label="对内名称"
            width="110"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.priuserdefnvc2 ? row.priuserdefnvc2 : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="priuserdefnvc3"
            label="CTP日期"
            width="110"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.priuserdefnvc3 ? row.priuserdefnvc3 : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="priuserdefnvc4"
            label="钢刀编号"
            width="110"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.priuserdefnvc4 ? row.priuserdefnvc4 : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="priuserdefnvc5"
            label="盒型"
            width="110"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.priuserdefnvc5 ? row.priuserdefnvc5 : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="clerkuser"
            label="销售业务员"
            show-tooltip-when-overflow
            width="150"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <div v-if="row.clerkuser">{{ row.clerkuser }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="wkshp_name"
            label="生产车间"
            show-tooltip-when-overflow
            sortable="custom"
            width="150"
          >
            <template slot-scope="{row}">
              <div v-if="row.wkshp_name">{{ row.wkshp_name }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="planstartdate"-->
          <!--            show-tooltip-when-overflow-->
          <!--            label="预计开工时间"-->
          <!--            sortable="custom"-->
          <!--            width="130"-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div v-if="row.planstartdate">{{ row.planstartdate.substring(0, 11) }}</div>-->
          <!--              <div v-else>/</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="planenddate"-->
          <!--            label="预计完工时间"-->
          <!--            show-tooltip-when-overflow-->
          <!--            sortable="custom"-->
          <!--            width="130"-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div v-if="row.planenddate">{{ row.planenddate.substring(0, 11) }}</div>-->
          <!--              <div v-else>/</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            prop="planenddate"
            label="预计开工日期"
            sortable="custom"
            show-tooltip-when-overflow
            width="130"
          >
            <template slot-scope="{row}">
              <div v-if="row.planenddate">{{ row.planenddate.substring(0, 11) }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="planstartdate"
            label="预计完工日期"
            sortable="custom"
            show-tooltip-when-overflow
            width="130"
          >
            <template slot-scope="{row}">
              <div v-if="row.planstartdate">{{ row.planstartdate.substring(0, 11) }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="saleOrderDeliveryDate"
            label="预计交付日期"
            sortable="custom"
            show-tooltip-when-overflow
            width="130"
          >
            <template slot-scope="{row}">
              <div v-if="row.saleOrderDeliveryDate">{{ row.saleOrderDeliveryDate.substring(0, 11) }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>

          <el-table-column
            show-tooltip-when-overflow
            prop="createuser"
            label="创建人员"
            sortable="custom"
            width="150"
          >
            <template slot-scope="{row}">
              <div v-if="row.createuser">{{ row.createuser }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createdate"
            label="创建时间"
            width="130"
            show-tooltip-when-overflow
            sortable="custom"
          >
            <template slot-scope="{row}">
              <div v-if="row.createdate">{{ row.createdate.substring(0, 11) }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="120"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="下达" placement="top">
                  <!--                <el-button v-waves type="text" @click="edit('edit',row)">下达</el-button>-->
                  <i
                    class="el-icon-bottom"
                    :style="{color:$store.state.settings.theme}"
                    style="cursor: pointer;margin-left: 5px"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="订单关闭" placement="top">
                  <i
                    class="el-icon-switch-button"
                    :style="{color:$store.state.settings.theme}"
                    style="cursor: pointer;margin-left: 15px"
                    @click="orderClose(row.id)"
                  />
                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="订单删除" placement="top">
                  <i
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    style="cursor: pointer;margin-left: 15px"
                    @click="orderDel(row.id)"
                  />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getErpOrderSearch"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'下达'"
      :visible.sync="dialogVisible"
      width="900px"
      top="12vh"
      :close-on-click-modal="false"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="106px">
        <el-form-item label="订单编号" prop="erpordercode">
          <el-input v-model="dialogForm.erpordercode" disabled style="width: 200px" />
        </el-form-item>
        <el-form-item label="产品编码" prop="partcode">
          <el-input v-model="dialogForm.partcode" disabled style="width: 200px" />
        </el-form-item>
        <el-form-item label="产品名称" prop="partname">
          <el-input v-model="dialogForm.partname" disabled style="width: 200px" />
        </el-form-item>

        <el-form-item label="产品规格" prop="partspec">
          <el-input v-model="dialogForm.partspec" disabled style="width: 200px" />
        </el-form-item>
        <el-form-item label="生产车间" prop="wkshopname">
          <el-input v-model="dialogForm.wkshopname" disabled style="width: 200px" />
        </el-form-item>
        <el-form-item label="所属仓库" prop="warehousename">
          <el-input v-model="dialogForm.warehousename" disabled style="width: 200px" />
        </el-form-item>
        <el-form-item label="订单数量" prop="erpqty">
          <el-input v-model="dialogForm.erpqty" disabled style="width: 200px" />
        </el-form-item>
        <el-form-item label="已下单数" prop="relse_qty">
          <el-input
            v-model="dialogForm.relse_qty"
            disabled
            oninput="value=value.replace(/[^0-9.]/g,'')"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="下单数量" prop="markqty">
          <el-input
            v-model="dialogForm.markqty"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="下单单数" prop="ordernum">
          <el-input
            v-model="dialogForm.ordernum"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="销售业务员" prop="">
          <el-input
            v-model="dialogForm.clerkuser"
            disabled
            style="width: 200px"
          />
        </el-form-item>
        <!--        :picker-options="pickerOptions"-->

        <el-form-item label="预计交付日期" prop="saleOrderDeliveryDate">
          <el-date-picker
            v-model="dialogForm.saleOrderDeliveryDate"
            type="date"
            size="mini"
            :clearable="false"
            class="dateMini"
            format="yyyy-MM-dd"
            style="width: 200px"
            placeholder="选择日期"
            :disabled="dialogForm.saleOrderDeliveryDateIsDisabled"
          />
        </el-form-item>

        <div style="display: flex">
          <el-form-item label="预计开工日期" prop="" style="display: flex">
            <el-date-picker
              v-model="dialogForm.paystartdate"
              type="date"
              size="mini"
              style="width: 200px"
              :clearable="false"
              class="dateMini"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            />
          </el-form-item>

          <el-form-item label="预计完工日期" prop="" style="display: flex">
            <el-date-picker
              v-model="dialogForm.payenddate"
              type="date"
              size="mini"
              style="width: 200px"
              :clearable="false"
              class="dateMini"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            />
          </el-form-item>

        </div>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >下 è¾¾</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { handleDatetime } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import {
  ClosedErpOrder,
  DeleteErpOrder,
  ErpOrderSearch,
  MarkBatchSaveErpOrder,
  MarkSaveErpOrder
} from '@/api/WorkOrder'
import { SeaveSearchErpOrder } from '@/api/ErpSyncMes'
import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'
import DateType from '@/components/DateType'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  name: 'ProduceOrderList',
  components: {
    Pagination, DateType
  },
  directives: { elDragDialog, waves },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入编码'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('编码不能为中文'))
        } else {
          callback()
        }
      }
    }
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        wkshopcode: '', // è½¦é—´ç¼–码
        erporderstus: '', // è®¢å•çŠ¶æ€ç 
        erpordercode: '', // è®¢å•ç¼–号
        partcode: '', // äº§å“ç¼–码
        partname: '', // äº§å“åç§°
        partspec: '', // äº§å“è§„æ ¼
        creatuser: '', // åˆ›å»ºäººå‘˜
        saleordercode: '', // é”€å”®è®¢å•
        // paystartdate: '', // äº¤ä»˜æ—¶é—´
        paystartdate: '', // é¢„计开工时间
        payenddate: '', // é¢„计完工时间
        createdate: '', // åˆ›å»ºæ—¶é—´

        datatype: 'ED', // æ—¶é—´ç±»åž‹
        timeValue: [], // æ—¶é—´å€¼

        prop: 'wo', // æŽ’序字段
        order: 'desc', // æŽ’序字段
        page: 1, // ç¬¬å‡ é¡µ
        rows: 20 // æ¯é¡µå¤šå°‘条
      },

      erporderstusArr: [
        { code: 'NEW', name: '新订单' },
        { code: 'CREATING', name: '部分下达' },
        { code: 'CREATED', name: '全部下达' },
        { code: 'CLOSED', name: '已关闭' }
      ],
      wkshopcodeArr: [],
      total: 10,
      radioSelectedId: '',
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        erporderid: '', // è®¢å•id
        sbid: '', // è®¢å•æ˜Žç»†id
        erpordercode: '', // è®¢å•ç¼–号
        saleordercode: '', // é”€å”®è®¢å•

        partcode: '', // äº§å“ç¼–码
        partname: '', // äº§å“åç§°
        partspec: '', // äº§å“è§„æ ¼

        wkshopcode: '', // è½¦é—´ç¼–码
        wkshopname: '', // è½¦é—´åç§°

        warehousecode: '', // ä»“库编码
        warehousename: '', // ä»“库名称

        erpqty: '', // è®¢å•æ•°é‡
        markqty: '', // ä¸‹å•æ•°é‡
        ordernum: '', // ä¸‹å•å•æ•°
        relse_qty: '', // å·²ä¸‹å•æ•°é‡

        clerkuser: '', // é”€å”®ä¸šåŠ¡å‘˜

        saleOrderDeliveryDate: '', // é¢„计交付日期

        paystartdate: '', //   é¢„计开工日期
        payenddate: ''//  é¢„计完工日期
      },
      operation: '',
      dialogFormRules: {
        // OrgType: [
        //   { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] }
        // ],
        // OrgCode: [
        //   { required: true, validator: validateName, trigger: ['blur', 'change'] }
        // ],
        markqty: [
          { required: true, message: '请输入下单数量', trigger: ['blur', 'change'] }
        ],
        ordernum: [
          { required: true, message: '请输入下单单数', trigger: ['blur', 'change'] }
        ],
        saleOrderDeliveryDate: [
          { required: true, message: '请选择预计交付日期', trigger: ['blur', 'change'] }
        ]

      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      multipleSelection: []

      // expireTimeOption: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now() - 8.64e6 // å¦‚果没有后面的-8.64e6就是不可以选择今天的
      //   }
      // }

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  created() {
    this.getErpOrderSearch()
    // this.getPartSelect()// èŽ·å–产品编码信息

    this.getPrentOrganizationNoCompany()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {

    DateTypeChange(value) {
      this.form.datatype = value
    },
    cycleTimeChange(val) {
      this.form.timeValue = val
    },

    pickerChange(value) {
      console.log(value, 123)
      this.cycleTime = null
    },

    async getPrentOrganizationNoCompany() {
      const { data: res } = await PrentOrganizationNoCompany()
      this.wkshopcodeArr = res
    },
    async getErpOrderSearch() {
      console.log(this.form, 1)
      // let tempDate2 = this.form.paystartdate
      // if (tempDate2.length > 0) {
      //   tempDate2 = handleDatetime(tempDate2[0]) + '~' + handleDatetime(tempDate2[1])
      // }
      //
      // let tempDate = this.form.payenddate
      // if (tempDate.length > 0) {
      //   tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])
      // }

      const data = {

        erporderstus: this.form.erporderstus, // è®¢å•çŠ¶æ€ç 
        wkshopcode: this.form.wkshopcode, // è½¦é—´ç¼–码
        erpordercode: this.form.erpordercode, // è®¢å•ç¼–号
        saleordercode: this.form.saleordercode, // é”€å”®å•å·

        partcode: this.form.partcode, // äº§å“ç¼–码
        partname: this.form.partname, // äº§å“åç§°
        partspec: this.form.partspec, // äº§å“è§„æ ¼

        datatype: this.form.datatype, // æ—¥æœŸç±»åž‹(计划开工(PS)、计划完工(PE)、预计交付(ED))
        searchdate: this.form.timeValue.join('~'), // æ—¶é—´æ®µ
        // paystartdate: tempDate2, // äº¤ä»˜æ—¶é—´
        // payenddate: tempDate, // äº¤ä»˜æ—¶é—´

        creatuser: this.form.creatuser, // åˆ›å»ºäººå‘˜

        prop: this.form.prop, // æŽ’序字段
        order: this.form.order, // æŽ’序字段
        page: this.form.page, // ç¬¬å‡ é¡µ
        rows: this.form.rows // æ¯é¡µå¤šå°‘条

      }

      const res = await ErpOrderSearch(data)
      this.tableData = res.data
      this.total = res.count
    },
    // æŽ’序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getErpOrderSearch()
    },
    // åŒæ­¥ERP
    syncERP() {
      const loading = this.$loading({
        lock: true,
        text: '正在同步ERP，请稍等...',
        spinner: 'el-icon-loading',
        customClass: 'osloading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      SeaveSearchErpOrder().then(res => {
        console.log(res, 11)
        if (res.code === '200') {
          setTimeout(() => {
            this.getErpOrderSearch()
            loading.close()
            this.$message.success('同步成功！')
          }, 2000)
        }
        // else if (res.code === '300') {
        //   setTimeout(() => {
        //     loading.close()
        //     this.$message.error('同步失败！')
        //   }, 10000)
        // }
      }).catch(e => {
        loading.close()
      })
    },
    // æŸ¥è¯¢
    search() {
      this.getErpOrderSearch()
    },
    // é‡ç½®
    reset() {
      this.form.wkshopcode = ''
      this.form.erporderstus = ''
      this.form.erpordercode = ''
      this.form.partcode = ''
      this.form.partname = ''
      this.form.partspec = ''
      this.form.paystartdate = ''
      this.form.payenddate = ''
      this.form.creatuser = ''
      this.form.saleordercode = ''
      this.form.createdate = ''

      this.form.timeValue = []
      this.cycleTime = null

      this.$refs.DateTypeRef.clearValue()

      this.getErpOrderSearch()
    },
    // å•é€‰æ¡†é€‰ä¸­èŽ·å–当前行信息
    // getCurrentRow(id) {
    //   this.radioSelectedId = id
    // },
    // rowClick(row) {
    //   this.radioSelectedId = row.id
    // },

    // è®¢å•åˆ é™¤
    orderDel(id) {
      this.tableData.forEach(item => {
        if (item.id === id) {
          if (item.status === 'CLOSED') {
            return this.$message.info('此订单已关闭，无法删除！')
          } else {
            this.$confirm('是否确认关闭订单?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              DeleteErpOrder({ erpordercode: item.wo, erporderid: id }).then(res => {
                if (res.code === '200') {
                  this.$message.success('订单删除成功!')
                  this.getErpOrderSearch()
                }
              })
            }).catch(() => {
              this.$message.info('已取消删除！')
            })
          }
        }
      })
    },
    // è®¢å•å…³é—­
    async orderClose(id) {
      this.tableData.forEach(item => {
        if (item.id === id) {
          if (item.status !== 'NEW') {
            return this.$message.info('此订单非新订单，无法关闭！')
          } else {
            this.$confirm('是否确认关闭订单?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ClosedErpOrder({ erpordercode: item.wo, erporderid: id }).then(res => {
                if (res.code === '200') {
                  this.$message.success('订单关闭成功!')
                  this.getErpOrderSearch()
                }
              })
            }).catch(() => {
              this.$message.info('已取消关闭！')
            })
          }
        }
      })
    },
    batchHandle() {
      this.$confirm('是否批量下达?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length === 0) {
          return this.$message.info('请先选择订单！')
        }
        // console.log(JSON.parse(JSON.stringify(this.multipleSelection)))
        const data = []
        this.multipleSelection.forEach(i => {
          data.push({
            'erporderid': i.id,
            'sbid': i.sbid,
            'erpordercode': i.wo,
            'partcode': i.partcode,
            'wkshopcode': i.wkshp_code,
            'warehousecode': i.stck_code,
            'erpqty': i.qty,
            'markqty': i.qty,
            'ordernum': 1,
            'clerkuser': i.clerkuser,
            'relse_qty': i.qty,
            'saleordercode': i.saleOrderCode,
            // 'saleOrderDeliveryDate': i.saleOrderDeliveryDate
            'saleOrderDeliveryDate': handleDatetime(new Date()) + ' 00:00:00',

            'paystartdate': i.planstartdate,
            'payenddate': i.planenddate
          })
        })
        // console.log(JSON.parse(JSON.stringify(data)))
        MarkBatchSaveErpOrder(data).then(res => {
          if (res.code === '200') {
            this.multipleSelection = []
            this.$message.success('批量下达成功！')
            this.getErpOrderSearch()
          } else {
            this.$message.error('批量下达失败！')
          }
        })
      }).catch(() => {
        this.$message.info('已取消下达！')
      })
    },
    selected(row, index) {
      return row.status === 'NEW'
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // æ–°å¢žæŒ‰é’®
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
    },
    // ä¿®æ”¹æŒ‰é’®
    edit(operation, row) {
      if (parseFloat(row.qty) === parseFloat(row.relse_qty) || row.status === 'CLOSED') {
        return this.$message.info('此工单已全部下达！')
      }

      this.operation = operation
      this.dialogVisible = true

      this.$nextTick(() => {
        this.dialogForm.sbid = row.sbid
        this.dialogForm.erporderid = row.id
        this.dialogForm.erpordercode = row.wo
        this.dialogForm.saleordercode = row.saleOrderCode

        this.dialogForm.partcode = row.partcode
        this.dialogForm.partname = row.partname
        this.dialogForm.partspec = row.partspec

        this.dialogForm.wkshopcode = row.wkshp_code
        this.dialogForm.wkshopname = row.wkshp_name

        this.dialogForm.warehousecode = row.stck_code
        this.dialogForm.warehousename = row.stck_name

        this.dialogForm.saleOrderDeliveryDate = row.saleOrderDeliveryDate

        this.dialogForm.erpqty = row.qty
        this.dialogForm.markqty = parseFloat(row.qty) - parseFloat(row.relse_qty)
        this.dialogForm.ordernum = 1
        this.dialogForm.relse_qty = row.relse_qty
        this.dialogForm.clerkuser = row.clerkuser

        this.dialogForm.paystartdate = row.planstartdate
        this.dialogForm.payenddate = row.planenddate
      })
    },
    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    handleClose() {
      this.dialogForm = {
        erporderid: '', // è®¢å•id
        sbid: '', // è®¢å•æ˜Žç»†id
        erpordercode: '', // è®¢å•ç¼–号
        saleordercode: '', // é”€å”®è®¢å•

        partcode: '', // äº§å“ç¼–码
        partname: '', // äº§å“åç§°
        partspec: '', // äº§å“è§„æ ¼

        wkshopcode: '', // è½¦é—´ç¼–码
        wkshopname: '', // è½¦é—´åç§°

        warehousecode: '', // ä»“库编码
        warehousename: '', // ä»“库名称

        erpqty: '', // è®¢å•æ•°é‡
        markqty: '', // ä¸‹å•æ•°é‡
        ordernum: '', // ä¸‹å•å•æ•°
        relse_qty: '', // å·²ä¸‹å•æ•°é‡

        payenddate: '', // é¢„计完工日期
        paystartdate: '', // é¢„计开工日期

        saleOrderDeliveryDate: '' // é¢„计交付日期
      }
      this.$refs.dialogForm.clearValidate()
    },
    // å¯¹è¯æ¡†å–消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // å¯¹è¯æ¡†ç¡®è®¤
    dialogVisibleConfirm() {
      this.dialogForm.markqty = parseFloat(this.dialogForm.markqty)
      this.dialogForm.erpqty = parseFloat(this.dialogForm.erpqty)
      this.dialogForm.relse_qty = parseFloat(this.dialogForm.relse_qty)
      this.dialogForm.ordernum = parseFloat(this.dialogForm.ordernum)
      if (this.dialogForm.markqty < 1 || this.dialogForm.markqty > this.dialogForm.erpqty - this.dialogForm.relse_qty) {
        return this.$message.info('下单数量超出可下单数的范围！')
      }

      if (this.dialogForm.ordernum < 1 || this.dialogForm.ordernum > this.dialogForm.markqty) {
        return this.$message.info('下单单数超出可下单单数的范围！')
      }

      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          const data = {
            'sbid': this.dialogForm.sbid,
            'erporderid': this.dialogForm.erporderid,
            'erpordercode': this.dialogForm.erpordercode,
            'saleordercode': this.dialogForm.saleordercode,
            'partcode': this.dialogForm.partcode,
            'wkshopcode': this.dialogForm.wkshopcode,
            'warehousecode': this.dialogForm.warehousecode,
            'clerkuser': this.dialogForm.clerkuser,
            'erpqty': this.dialogForm.erpqty,
            'markqty': this.dialogForm.markqty,
            'ordernum': this.dialogForm.ordernum,
            'payenddate': this.dialogForm.payenddate,
            'paystartdate': this.dialogForm.paystartdate,
            'relse_qty': this.dialogForm.relse_qty,
            'saleOrderDeliveryDate': handleDatetime(this.dialogForm.saleOrderDeliveryDate) + ' 00:00:00'
          }

          MarkSaveErpOrder(data).then(res => {
            if (res.code === '200') {
              this.dialogVisible = false
              this.$message.success('下达成功！')
              this.getErpOrderSearch()
              this.$store.state.app.buttonIsDisabled = false
            } else {
              this.$message.error('下达失败！')
            }
          })
        }
      })
    },
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 250

        this.$refs.tableDataRef.doLayout()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      const i = 7
      columns.forEach((column, index) => {
        if (index === i) {
          sums[index] = '总数'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property === 'qty') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
              // return Math.round(prev * 100) / 100 + Math.round(curr * 100) / 100
            }
          }, 0)

          sums[index] += ' å•'
        }
        if (column.property === 'relse_qty') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
              // return Math.round(prev * 100) / 100 + Math.round(curr * 100) / 100
            }
          }, 0)

          sums[index] += ' å•'
        }
      })

      this.$nextTick(() => {
        this.$refs.tableDataRef.doLayout()
      })
      return sums
    }
  }
}
</script>

<!--公共页面样式-->
<style lang="scss" scoped>
$main_color: #42b983;

::v-deep .el-range__icon {
  line-height: 28px !important;
}

::v-deep .el-range-separator {
  line-height: 28px !important;
}

::v-deep .el-range-input {
  font-size: 14px;
}

::v-deep .el-range-separator {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
  color: $main_color;
  cursor: pointer;
}

.el-icon-edit-outline {
  margin-right: 15px;
}

//::v-deep .el-button--primary, .el-button--default, .el-button--info {
//  height: 34px;
//  display: flex;
//  align-items: center;
//  padding: 0 15px;
//}

::v-deep .el-button--primary {
  //background-color: $main_color !important;
}

::v-deep .el-button--default {
  background-color: #f8f8fa;
  border: none;
}

::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
  //color: #a7a7a7;
}

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

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

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

::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}

::v-deep .cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-table::before {
  height: 0;
}

::v-deep .el-table__body-wrapper {
  background-color: #f8f8fa;
}

::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #eaecef;
}

::v-deep .el-form--inline .el-form-item__label {
  color: #a7a7a7;
}

.body ::v-deep .el-divider {
  border: 1px solid #eee;
  width: 99%;
  margin: 10px auto;
}

.body ::v-deep .el-form-item {
  margin-bottom: 0;
}

.userDialogVisible ::v-deep .el-form-item {
  margin-bottom: 0;
}

.elTableDiv {
  ::v-deep .el-radio__label {
    display: none;
  }
}

.tableFixed {
  ::v-deep .el-table__fixed-right {
    height: 100% !important;
  }

  ::v-deep .el-table__fixed {
    height: 100% !important;
  }
}

.dateMini {
  ::v-deep .el-input__inner {
    line-height: 34px;
    height: 34px;
    width: 200px;
    display: flex;
    font-size: 14px !important;
    align-items: center !important;
  }

  ::v-deep .el-input__prefix {
    margin-top: -3px;
  }
}

::v-deep .el-icon-delete {
  cursor: pointer;
  margin-right: 0px !important;
}
</style>
<style>
.el-table .custom-row {
  background: #f8f8fa;
}

.osloading {
  font-size: 26px !important;
}

.el-loading-text {
  font-size: 26px !important;
}

.el-picker-panel__footer {
  display: flex !important;
  justify-content: flex-end !important;
}

</style>


 src/views/workOrder/workOrderClose.vue

ÎļþÌ«´ó

 src/views/workOrder/workOrderList.vue

ÎļþÌ«´ó

 src/views/workOrder/workOrderSend.vue

ÎļþÌ«´ó