1.页面响应式配置2.设备清单页面的开发

loulijun2021

2022-06-24 a271e033ffebf9e95c9ee54fac8891814583571f

1.页面响应式配置2.设备清单页面的开发

 package.json

@@ -20,9 +20,12 @@
    "element-ui": "2.13.2",
    "jquery": "^3.6.0",
    "js-cookie": "2.2.0",
    "lib-flexible": "^0.3.2",
    "lib-flexible-computer": "^1.0.2",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "postcss-px2rem": "^0.3.0",
    "vue": "2.6.10",
    "vue-router": "3.0.6",
    "vuex": "3.1.0"
@@ -44,6 +47,7 @@
    "eslint-plugin-vue": "6.2.2",
    "html-webpack-plugin": "3.2.0",
    "mockjs": "1.0.1-beta3",
    "px2rem-loader": "^0.1.9",
    "runjs": "4.3.2",
    "sass": "1.26.8",
    "sass-loader": "8.0.2",

 src/api/sbgl.js

@@ -94,3 +94,11 @@
    method: 'get'
  })
}
// æ‰€å±žè½¦é—´æŸ¥æ‰¾æ‰€å±žäº§çº¿æŽ¥å£
export function WorkShopSelectLine(data) {
  return request({
    url: 'BasicSetting/WorkShopSelectLine',
    method: 'get',
    params: data
  })
}

 src/main.js

@@ -43,6 +43,9 @@
Vue.prototype.$headerCellStyle = headerCellStyle() // è®¾ç½®å…¨å±€è¡¨å¤´æ ·å¼
Vue.prototype.$cellStyle = cellStyle() // è®¾ç½®å…¨å±€è¡¨ä½“样式

// import 'lib-flexible' // é˜¿é‡Œå¯ä¼¸ç¼©å¸ƒå±€æ–¹æ¡ˆ
// import 'lib-flexible-computer'

new Vue({
  el: '#app',
  router,

 src/utils/global.js

@@ -10,6 +10,7 @@
  }
  return option
}

// å¤„理表格单元格样式
export function cellStyle() {
  const option = {
@@ -17,3 +18,11 @@
  }
  return option
}

// æ—¶é—´å¤„理函数
export function handleDatatime(value) {
  const data = new Date(value)
  const month = data.getMonth() < 9 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1
  const date = data.getDate() <= 9 ? '0' + data.getDate() : data.getDate()
  return data.getFullYear() + '-' + month + '-' + date
}

 src/views/jcsz/jsqd.vue

@@ -48,6 +48,7 @@
          :data="tableData"
          border
          stripe
          :height="tableHeight"
          :style="{width: 100+'%',height:tableHeight+'px'}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
@@ -143,7 +144,7 @@

    <!--    æ–°å¢žä¿®æ”¹å¯¹è¯æ¡†-->
    <el-dialog
      :title="operation==='add'?'添加':'修改'"
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
@@ -777,7 +778,7 @@
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    },
@@ -1477,7 +1478,7 @@
  width: 99%;
  margin: 10px auto;
}
::v-deep .el-form-item{
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}
</style>

 src/views/jcsz/wldw.vue

@@ -46,6 +46,7 @@
        <el-table
          :data="tableData"
          border
          :height="tableHeight"
          stripe
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
@@ -161,7 +162,7 @@
    </div>

    <el-dialog
      :title="operation==='add'?'添加':'修改'"
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
@@ -444,7 +445,7 @@
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    }
@@ -586,7 +587,7 @@
  margin: 10px auto;
}

::v-deep .el-form-item {
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}
</style>

 src/views/jcsz/yhqd.vue

@@ -63,6 +63,7 @@
          :data="tableData"
          border
          stripe
          :height="tableHeight"
          highlight-current-row
          :style="{width: 100+'%',height:tableHeight+'px'}"
          :header-cell-style="this.$headerCellStyle"
@@ -175,7 +176,7 @@

    <!--    ç”¨æˆ·æ¸…单新增、修改-->
    <el-dialog
      :title="operation==='add'?'添加':'修改'"
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
@@ -581,7 +582,7 @@
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    },
@@ -1055,7 +1056,7 @@
  width: 99%;
  margin: 10px auto;
}
::v-deep .el-form-item{
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}
</style>

 src/views/jcsz/zzjg.vue

@@ -48,6 +48,7 @@
          stripe
          :style="{width: 100+'%',height:tableHeight+'px'}"
          highlight-current-row
          :height="tableHeight"
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
@@ -127,7 +128,7 @@
    </div>

    <el-dialog
      :title="operation==='add'?'添加':'修改'"
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
@@ -138,7 +139,7 @@
        <el-form-item label="组织类型" prop="OrgType">
          <el-radio-group
            v-model="dialogForm.OrgType"
            style="display: flex; align-items: center; height: 40px;"

            @change="changeRadio"
          >
            <el-radio
@@ -400,7 +401,7 @@
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    }
@@ -503,7 +504,7 @@
  width: 99%;
  margin: 10px auto;
}
::v-deep .el-form-item{
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}
</style>

 src/views/login/index.vue

@@ -133,8 +133,8 @@
      // }
      const mPattern = /^\w+$/ // æ­£åˆ™ ç­‰ä»·äºŽ[A-Za-z0-9_]

      if (value.length < 5) {
        callback(new Error('账号长度不少于五位！'))
      if (value.length < 1) {
        callback(new Error('账号不能为空！'))
      } else if (!mPattern.test(value)) {
        callback(new Error('账号不符合规则，可输入字母、数字及下划线'))
      } else {
@@ -142,8 +142,8 @@
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不少于六位！'))
      if (value.length < 1) {
        callback(new Error('密码长度不能为空！'))
      } else {
        callback()
      }

 src/views/sbgl/sbqd.vue

@@ -80,9 +80,10 @@
        <el-table
          :data="tableData"
          border
          :height="tableHeight"
          stripe
          highlight-current-row
          :style="{width: 100+'%',height:tableHeight+'px'}"
          :style="{width: 100+'%',height:(tableHeight-50)+'px'}"
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
@@ -129,7 +130,7 @@
          </el-table-column>
          <el-table-column
            prop="input_date"
            label="投入时间"
            label="投入日期"
            sortable="custom"
            width="120"
          >
@@ -175,7 +176,7 @@
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-button type="text" @click="edit('edit',row)">修改</el-button>
                <el-button type="text" @click="del(row.id)">删除</el-button>
                <el-button type="text" @click="del(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
@@ -195,7 +196,7 @@
    </div>
    <!--设备清单新增编辑-->
    <el-dialog
      :title="operation==='add'?'添加':'修改'"
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
@@ -203,33 +204,62 @@
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="设备编码" prop="OrgCode">
          <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 220px" />
        <el-form-item label="设备编码" prop="devicecode">
          <el-input v-model="dialogForm.devicecode" :disabled="operation!=='add'" style="width: 220px" />
        </el-form-item>
        <el-form-item label="设备名称" prop="OrgName">
          <el-input v-model="dialogForm.OrgName" style="width: 220px" />
        <el-form-item label="设备名称" prop="devicename">
          <el-input v-model="dialogForm.devicename" style="width: 220px" />
        </el-form-item>
        <el-form-item label="设备类型" prop="OrgName">
          <el-input v-model="dialogForm.OrgName" style="width: 220px" />
        <el-form-item label="设备类型" prop="devicetypecode">
          <el-select v-model="dialogForm.devicetypecode" style="width: 220px" placeholder="请选择" @change="devicetypecodeChange">
            <el-option
              v-for="item in DeviceTypeArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备组" prop="OrgName">
          <el-input v-model="dialogForm.OrgName" style="width: 220px" />
        <el-form-item label="设备组" prop="devicegroupcode">
          <el-select v-model="dialogForm.devicegroupcode" :disabled="dialogForm.devicetypecode===''" style="width: 220px" placeholder="请选择">
            <el-option
              v-for="item in DeviceGroupArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="投入日期" prop="OrgName">
        <el-form-item label="投入日期" prop="importdate">
          <el-date-picker
            v-model="dialogForm.OrgCode"
            v-model="dialogForm.importdate"
            style="width: 220px"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="所属车间" prop="OrgName">
          <el-input v-model="dialogForm.OrgName" style="width: 220px" />
        <el-form-item label="所属车间" prop="workshopcode">
          <el-select v-model="dialogForm.workshopcode" style="width: 220px" placeholder="请选择" @change="workshopcodeChange">
            <el-option
              v-for="item in WorkShopArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属产线" prop="OrgName">
          <el-input v-model="dialogForm.OrgName" style="width: 220px" />
        <el-form-item label="所属产线" prop="linecode">
          <el-select v-model="dialogForm.linecode" :disabled="dialogForm.workshopcode===''" style="width: 220px" placeholder="请选择">
            <el-option
              v-for="item in WorkLineArr"
              :key="item.linecode"
              :label="item.linename"
              :value="item.linecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态" prop="OrgName">
          <el-select v-model="form.Status" placeholder="请选择">
        <el-form-item label="使用状态" prop="status">
          <el-select v-model="dialogForm.status" style="width: 220px" placeholder="请选择">
            <el-option
              v-for="item in StatusArr"
              :key="item.value"
@@ -238,8 +268,8 @@
            />
          </el-select>
        </el-form-item>
        <el-form-item label="稼动率" prop="OrgName">
          <el-input v-model="dialogForm.OrgName" style="width: 220px" />
        <el-form-item label="稼动率" prop="ratio">
          <el-input v-model="dialogForm.ratio" style="width: 195px" /><span style="margin-left: 10px">%</span>
        </el-form-item>

      </el-form>
@@ -389,7 +419,6 @@
          sortable="custom"
        >
          <template slot-scope="{row}">
            <!--            <el-input v-if="row.isVisible===1" v-model="row.eqptype_code" placeholder="请输入" />-->
            <el-select v-if="row.isVisible===1" v-model="row.eqptype_code" placeholder="请选择">
              <el-option
                v-for="item in DeviceTypeArr"
@@ -448,24 +477,18 @@

<script>
import Pagination from '@/components/Pagination'
import {
  AddUpdateOrganization,
  DeleteOrganization,
  OrganizationSearch,
  PrentOrganization,
  RoleTypeDelete
} from '@/api/jcsz'
import { getCookie } from '@/utils/auth'
import {
  AddUpdateDeviceGroup,
  AddUpdateDeviceType, DeleteDeviceType,
  AddUpdateDeviceGroup, AddUpdateDeviceManger,
  AddUpdateDeviceType, DeleteDeviceManger, DeleteDeviceType,
  DeviceGroupSearch,
  DeviceMangerSearch,
  DeviceTypeSearch,
  DeviceTypeSelect,
  DeviceTypeSelectGroup,
  WorkShopSelect
  WorkShopSelect, WorkShopSelectLine
} from '@/api/sbgl'
import { handleDatatime } from '@/utils/global'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
@@ -483,13 +506,6 @@
        } else {
          callback()
        }
      }
    }
    const validateTypeCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择上级'))
      } else {
        callback()
      }
    }
    return {
@@ -518,24 +534,43 @@
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        OrgType: '',
        OrgCode: '',
        OrgName: '',
        SupUnit: ''// ä¸Šçº§å•ä½
        id: '',
        devicecode: '',
        devicename: '',
        devicetypecode: '',
        devicegroupcode: '',
        importdate: '',
        workshopcode: '',
        linecode: '',
        status: '',
        ratio: ''
      },
      WorkLineArr: [], // æ‰€å±žäº§çº¿æ•°ç»„
      operation: '',
      dialogFormRules: {
        OrgType: [
          { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] }
        ],
        OrgCode: [
        devicecode: [
          { required: true, validator: validateName, trigger: ['blur', 'change'] }
        ],
        OrgName: [
        devicename: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ],
        SupUnit: [
          { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] }
        devicetypecode: [
          { required: true, message: '请选择设备类型', trigger: ['blur', 'change'] }
        ],
        devicegroupcode: [
          { required: true, message: '请选择设备组', trigger: ['blur', 'change'] }
        ],
        importdate: [
          { required: true, message: '请选择投入日期', trigger: ['blur', 'change'] }
        ],
        workshopcode: [
          { required: true, message: '请选择所属车间', trigger: ['blur', 'change'] }
        ],
        linecode: [
          { required: true, message: '请选择所属产线', trigger: ['blur', 'change'] }
        ],
        status: [
          { required: true, message: '请选择使用状态', trigger: ['blur', 'change'] }
        ]
      },
      DeviceTypeDialogVisible: false,
@@ -636,37 +671,62 @@
    edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      // console.log(row)
      this.$nextTick(() => {
        this.dialogForm.OrgCode = row.org_code
        this.dialogForm.OrgName = row.org_name
        this.dialogForm.SupUnit = row.parent_id
        this.dialogForm.id = row.id
        this.dialogForm.devicecode = row.code
        this.dialogForm.devicename = row.name
        this.dialogForm.devicetypecode = row.eqptype_code
        this.dialogForm.devicegroupcode = row.eqpgroup_code
        this.dialogForm.importdate = row.input_date
        this.dialogForm.workshopcode = row.wksp_code
        this.dialogForm.linecode = row.Line_code
        this.dialogForm.status = row.enable
        this.dialogForm.ratio = row.operation_ration
      })
    },
    // åˆ é™¤æŒ‰é’®
    async del(id) {
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // DeleteOrganization({ orgid: id }).then(res => {
        //   if (res.code === '200') {
        //     this.$message.success('删除成功!')
        //     this.getDeviceMangerSearch()
        //   }
        // })
        DeleteDeviceManger({ devicecode: row.code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            this.getDeviceMangerSearch()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    handleClose() {
      this.dialogForm.OrgType = ''
      this.dialogForm.OrgCode = ''
      this.dialogForm.OrgName = ''
      this.dialogForm.SupUnit = ''
      this.dialogForm.id = ''
      this.dialogForm.devicecode = ''
      this.dialogForm.devicename = ''
      this.dialogForm.devicetypecode = ''
      this.dialogForm.devicegroupcode = ''
      this.dialogForm.importdate = ''
      this.dialogForm.workshopcode = ''
      this.dialogForm.linecode = ''
      this.dialogForm.status = ''
      this.dialogForm.ratio = ''
      this.$refs.dialogForm.clearValidate()
    },
    // å¯¹è¯æ¡†æ‰€å±žè½¦é—´ä¸‹æ‹‰é€‰æ‹©æ”¹å˜æ—¶
    async   workshopcodeChange(val) {
      const { data: res } = await WorkShopSelectLine({ workshopcode: val })
      this.WorkLineArr = res
      this.dialogForm.linecode = ''
    },
    // å¯¹è¯æ¡†è®¾å¤‡ç±»åž‹ä¸‹æ‹‰é€‰æ‹©æ”¹å˜æ—¶
    async devicetypecodeChange(val) {
      const { data: res } = await DeviceTypeSelectGroup({ eqptypecode: val })
      this.DeviceGroupArr = res
      this.dialogForm.devicegroupcode = ''
    },
    // å¯¹è¯æ¡†å–消
    dialogVisibleCancel() {
@@ -677,12 +737,19 @@
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const data = {
            OrganCode: this.dialogForm.OrgCode,
            OrganName: this.dialogForm.OrgName,
            OperType: this.operation === 'add' ? 'Add' : 'Update',
            Operator: getCookie('admin')
            id: this.dialogForm.id,
            devicecode: this.dialogForm.devicecode,
            devicename: this.dialogForm.devicename,
            devicetypecode: this.dialogForm.devicetypecode,
            devicegroupcode: this.dialogForm.devicegroupcode,
            importdate: handleDatatime(this.dialogForm.importdate),
            workshopcode: this.dialogForm.workshopcode,
            linecode: this.dialogForm.linecode,
            status: this.dialogForm.status,
            ratio: this.dialogForm.ratio,
            OperType: this.operation === 'add' ? 'Add' : 'Update'
          }
          AddUpdateOrganization(data).then(res => {
          AddUpdateDeviceManger(data).then(res => {
            if (res.code === '200') {
              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
@@ -697,7 +764,7 @@
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    },
@@ -1042,7 +1109,7 @@
  width: 99%;
  margin: 10px auto;
}
::v-deep .el-form-item{
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}
</style>

 src/views/template.vue

@@ -11,13 +11,13 @@
        >
          <div class="elForm">
            <el-form-item label="组织编码" style=" display: flex;">
              <el-input v-model="form.OrgCode" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.OrgCode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="组织名称" style=" display: flex;">
              <el-input v-model="form.OrgName" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="组织类型" style=" display: flex;">
              <el-select v-model="form.OrgType" style="width: calc(100%-30px)" placeholder="请选择">
              <el-select v-model="form.OrgType" style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in OrgTypeArr"
                  :key="item.value"
@@ -27,7 +27,7 @@
              </el-select>
            </el-form-item>
            <el-form-item label="创建人员" style=" display: flex;">
              <el-input v-model="form.UserName" style="width: calc(100%-30px)" placeholder="请输入" />
              <el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" />
            </el-form-item>
          </div>
          <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
@@ -39,11 +39,13 @@
      <el-divider />
      <div style="margin-left: 10px;display: flex">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>
      </div>
      <el-divider />
      <div class="elTableDiv">
        <el-table
          :data="tableData"
          :height="tableHeight"
          border
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
@@ -124,7 +126,7 @@
    </div>

    <el-dialog
      :title="operation==='add'?'添加':'修改'"
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
@@ -132,27 +134,14 @@
      @close="handleClose"
    >
      <el-form ref="dialogForm" :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="组织类型" prop="OrgType">
          <el-radio-group
            v-model="dialogForm.OrgType"
            style="display: flex;align-items: end;height: 29px;"
            @change="changeRadio"
          >
            <el-radio
              v-for="item in OrgTypeArr"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="组织类型" prop="OrgType" />
        <el-form-item label="组织编码" prop="OrgCode">
          <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 220px" />
        </el-form-item>
        <el-form-item label="组织名称" prop="OrgName">
          <el-input v-model="dialogForm.OrgName" style="width: 220px" />
        </el-form-item>
        <el-form-item v-if="dialogFormOrgTypeSelected!=='F'" prop="SupUnit" label="上级单位">
        <el-form-item prop="SupUnit" label="上级单位">
          <el-select
            v-model="dialogForm.SupUnit"
            style="width: 220px"
@@ -236,8 +225,6 @@
        OrgName: '',
        SupUnit: ''// ä¸Šçº§å•ä½
      },
      SupUnitArr: [],
      dialogFormOrgTypeSelected: '',
      operation: '',
      dialogFormRules: {
        OrgType: [
@@ -286,6 +273,9 @@
    search() {
      this.getOrganizationSearch()
    },
    upload() {

    },
    // é‡ç½®
    reset() {
      this.form.OrgCode = ''
@@ -293,23 +283,6 @@
      this.form.OrgType = ''
      this.form.UserName = ''
      this.getOrganizationSearch()
    },
    // å•é€‰æ¡†æ”¹å˜æ—¶
    async changeRadio(val) {
      if (val.length > 1) {
        this.OrgTypeArr.forEach(item => {
          if (item.label === val) {
            this.dialogFormOrgTypeSelected = item.value
          }
        })
        this.dialogForm.SupUnit = ''
      } else {
        this.dialogFormOrgTypeSelected = val
      }
      if (this.dialogFormOrgTypeSelected !== 'F') {
        const { data: res } = await PrentOrganization({ orgcode: this.dialogFormOrgTypeSelected })
        this.SupUnitArr = res
      }
    },

    // æ–°å¢žæŒ‰é’®
@@ -321,19 +294,8 @@
    edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      if (row.description === 'F') {
        this.dialogForm.OrgType = '工厂'
      } else if (row.description === 'D') {
        this.dialogForm.OrgType = '部门'
      } else if (row.description === 'W') {
        this.dialogForm.OrgType = '车间'
      } else if (row.description === 'K') {
        this.dialogForm.OrgType = '科室'
      } else if (row.description === 'L') {
        this.dialogForm.OrgType = '生产线'
      }

      this.$nextTick(() => {
        this.changeRadio(this.dialogForm.OrgType)
        this.dialogForm.OrgCode = row.org_code
        this.dialogForm.OrgName = row.org_name
        this.dialogForm.SupUnit = row.parent_id
@@ -395,7 +357,7 @@
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    }
@@ -534,7 +496,7 @@
  margin: 10px auto;
}

::v-deep .el-form-item {
.body ::v-deep .el-form-item {
  margin-bottom: 0;
}


 src/views/wlgl/ckdy.vue

@@ -1,11 +1,464 @@
<template />
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="padding: 10px 5px 0 0">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          inline
          style="display: flex;justify-content: space-between"
        >
          <div class="elForm">
            <el-form-item label="仓库编码" style=" display: flex;">
              <el-input v-model="form.warehousecode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="仓库名称" style=" display: flex;">
              <el-input v-model="form.warehousename" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="仓库描述" style=" display: flex;">
              <el-input v-model="form.description" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="创建人员" style=" display: flex;">
              <el-input v-model="form.createuser" style="width: 200px" placeholder="请输入" />
            </el-form-item>
          </div>
          <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
      </div>
      <el-divider />
      <div style="margin-left: 10px;display: flex">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>
      </div>
      <el-divider />
      <div class="elTableDiv">
        <el-table
          :data="tableData"
          border
          :height="tableHeight"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <!--          <el-table-column-->
          <!--            type="selection"-->
          <!--            width="50"-->
          <!--          />-->
          <el-table-column
            prop="RowNum"
            width="50"
            label="序号"
          />
          <el-table-column
            prop="code"
            label="仓库编码"
            sortable="custom"
          />
          <el-table-column
            prop="name"
            label="仓库名称"
            sortable="custom"
          />
          <el-table-column
            prop="description"
            label="仓库描述"
            sortable="custom"
          />
          <el-table-column
            prop="lm_user"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            sortable="custom"
          />
          <el-table-column
            label="操作"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-button type="text" @click="edit('edit',row)">修改</el-button>
                <el-button type="text" @click="del(row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getWareHouseDefSearch"
      />
    </div>

    <el-dialog
      :title="operation==='add'?'新增':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="仓库编码" prop="OrgCode">
          <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 220px" />
        </el-form-item>
        <el-form-item label="仓库名称" prop="OrgName">
          <el-input v-model="dialogForm.OrgName" style="width: 220px" />
        </el-form-item>
        <el-form-item label="仓库描述" prop="SupUnit">
          <el-input v-model="dialogForm.OrgName" type="textarea" style="width: 220px" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">ç¡® å®š</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'
import { getCookie } from '@/utils/auth'
import { WareHouseDefSearch } from '@/api/wlgl'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  name: 'Ckdy'
  name: 'Zzjg',
  components: {
    Pagination
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入编码'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('编码不能为中文'))
        } else {
          callback()
        }
      }
    }
    const validateTypeCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择上级'))
      } else {
        callback()
      }
    }
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        warehousecode: '', // ä»“库编码
        warehousename: '', // ä»“库名称
        description: '', // ä»“库描述
        createuser: '', // åˆ›å»ºäººå‘˜
        prop: 'lm_date', // æŽ’序字段
        order: 'desc', // æŽ’序字段
        page: 1, // ç¬¬å‡ é¡µ
        rows: 10 // æ¯é¡µå¤šå°‘条
      },
      total: 10,
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        OrgType: '',
        OrgCode: '',
        OrgName: ''
      },
      dialogFormOrgTypeSelected: '',
      operation: '',
      dialogFormRules: {
        OrgType: [
          { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] }
        ],
        OrgCode: [
          { required: true, validator: validateName, trigger: ['blur', 'change'] }
        ],
        OrgName: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ],
        SupUnit: [
          { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  created() {
    this.getWareHouseDefSearch()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    async getWareHouseDefSearch() {
      const res = await WareHouseDefSearch(this.form)
      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.getWareHouseDefSearch()
    },
    // æŸ¥è¯¢
    search() {
      this.getWareHouseDefSearch()
    },
    upload() {

    },
    // é‡ç½®
    reset() {
      this.form.warehousecode = ''
      this.form.warehousename = ''
      this.form.description = ''
      this.form.createuser = ''
      this.getWareHouseDefSearch()
    },
    // æ–°å¢žæŒ‰é’®
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
    },
    // ä¿®æ”¹æŒ‰é’®
    edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      this.$nextTick(() => {
        this.dialogForm.OrgCode = row.org_code
        this.dialogForm.OrgName = row.org_name
        this.dialogForm.SupUnit = row.parent_id
      })
    },
    // åˆ é™¤æŒ‰é’®
    async del(id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteOrganization({ orgid: id }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            this.getWareHouseDefSearch()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    handleClose() {
      this.dialogForm.OrgType = ''
      this.dialogForm.OrgCode = ''
      this.dialogForm.OrgName = ''
      this.dialogForm.SupUnit = ''
      this.$refs.dialogForm.clearValidate()
    },
    // å¯¹è¯æ¡†å–消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // å¯¹è¯æ¡†ç¡®è®¤
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const data = {
            OrganType: this.dialogFormOrgTypeSelected,
            OrganCode: this.dialogForm.OrgCode,
            OrganName: this.dialogForm.OrgName,
            SupUnit: this.dialogFormOrgTypeSelected === 'F' ? '0' : this.dialogForm.SupUnit,
            OperType: this.operation === 'add' ? 'Add' : 'Update',
            Operator: getCookie('admin')
          }
          AddUpdateOrganization(data).then(res => {
            if (res.code === '200') {
              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.getWareHouseDefSearch()
            } else {
              this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    }
  }
}
</script>

<style scoped>
<style lang="scss" scoped>
$main_color: #42b983;
::v-deep .el-button--primary {
  background-color: $main_color !important;
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  padding: 0 20px;
}

::v-deep .el-button--info {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: $main_color !important;
}

::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

.footerButton {
  display: flex;
  justify-content: end;
}

::v-deep .el-button--default {
  background-color: #ffffff !important;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

::v-deep .el-button--default:hover {
  color: #606266;
}

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

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: $main_color;
  border-color: $main_color;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
}

::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}

::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}

::v-deep .cell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

::v-deep .el-button--text {
  color: $main_color;
  font-size: 14px;
  cursor: pointer;
}

.operationClass {
  height: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-icon-share {
  color: $main_color;
  cursor: pointer;
}

.el-checkbox.is-bordered.is-checked {
  border-color: $main_color;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: $main_color;
  background: $main_color;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: $main_color;
  background: $main_color;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: $main_color !important;
}

::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin: 10px 30px 0px 0;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px 30px 0px 0;
}

.body ::v-deep .el-divider {
  border: 1px solid #eee;
  width: 99%;
  margin: 10px auto;
}

.body ::v-deep .el-form-item {
  margin-bottom: 0;
}

</style>

 src/views/xtsy/index.vue

@@ -128,8 +128,9 @@
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        this.tableHeight = this.mainHeight - 100
        this.mainHeight = window.innerHeight - 120
        // this.mainHeight = window.innerHeight - 200
        // this.tableHeight = this.mainHeight - 100
      })
    },
    handleEcharts() {

 src/views/zzmx/gylx.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;">
      <div style="margin-bottom: 20px;">
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="padding: 10px 5px 0 0">
        <el-form
          ref="form"
          :model="form"
@@ -9,453 +9,510 @@
          inline
          style="display: flex;justify-content: space-between"
        >
          <div style="display: flex;justify-content: space-around;width: 85%">
            <el-form-item label="公益路线">
              <el-input v-model="form.gylx" placeholder="请输入" />
          <div class="elForm">
            <el-form-item label="工艺编码" style=" display: flex;">
              <el-input v-model="form.routecode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="物料编码">
              <el-input v-model="form.wlbm" placeholder="请输入" />
            <el-form-item label="工艺名称" style=" display: flex;">
              <el-input v-model="form.routename" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="物料名称">
              <el-input v-model="form.wlmc" placeholder="请输入" />
            <el-form-item label="工艺描述" style=" display: flex;">
              <el-input v-model="form.description" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="创建人员" style=" display: flex;">
              <el-input v-model="form.createuser" style="width: 200px" placeholder="请输入" />
            </el-form-item>
          </div>
          <div style="display: flex;">
          <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="text" style="display: flex;align-items: start;padding-top: 10px;" @click="reset">重置
            </el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div style="display: flex;justify-content: space-between">

          <div style="display:flex;">
            <el-button type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
            <el-button type="primary" icon="el-icon-delete">修改</el-button>
            <el-button type="primary" icon="el-icon-delete">删除</el-button>
            <el-button type="primary" icon="el-icon-upload2" @click="upLoad">导入</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downLoad">导出</el-button>
          </div>

          <div style="display: flex;justify-content: end;margin-right: 20px">
            <el-button type="text" icon="el-icon-document">查看我的工作日志</el-button>
      <el-divider />
      <div style="margin-left: 10px;display: flex">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>
          </div>

        </div>
      </div>
      <div style="display: flex;width: 100%;">
        <div>
      <el-divider />
      <div class="elTableDiv">
          <el-table
            :data="tableData1"
            style="width: 100%;border: 1px solid #eee"
          :data="tableData"
          :height="tableHeight"
          border
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
          @sort-change="sortChange"
          >
            <el-table-column type="selection">
              <!--              <template slot-scope="{row}">-->

              <!--                &lt;!&ndash;                {{ row.isSelect }}&ndash;&gt;-->

              <!--                &lt;!&ndash;                <el-radio :key="row.id" v-model="row.id" @change="radioValueChange($event)" />&ndash;&gt;-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column label="工艺路线" prop="gylx" />
            <el-table-column show-overflow-tooltip label="物料编码" prop="wlbm" />
            <el-table-column show-overflow-tooltip label="物料名称" prop="wlmc" />
            <el-table-column label="物料规格" prop="wlgg" />
            <el-table-column label="结束装箱" prop="jszx">
          <!--          <el-table-column-->
          <!--            type="selection"-->
          <!--            width="50"-->
          <!--          />-->
          <el-table-column
            prop="RowNum"
            width="50"
            label="序号"
          />
          <el-table-column
            prop="code"
            label="编码"
            sortable="custom"
          />
          <el-table-column
            prop="name"
            label="名称"
            sortable="custom"
          />
          <el-table-column
            prop="description"
            label="工艺路线描述"
            sortable="custom"
          />
          <el-table-column
            prop="enable"
            label="使用状态"
            sortable="custom"
          >
              <template slot-scope="{row}">
                <div v-if="row.jszx==='1'">是</div>
                <div v-if="row.jszx==='0'">否</div>
              <div v-if="row.enable==='Y'">是</div>
              <div v-if="row.enable==='N'">否</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="lm_user"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            sortable="custom"
          />
          <el-table-column
            label="操作"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <!--                <el-button type="text" @click="edit('edit',row)">修改</el-button>-->
                <el-button type="text" @click="del(row.id)">删除</el-button>
              </div>
              </template>
            </el-table-column>
          </el-table>
      </div>
          <!--分页-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="form.pageNum"
            :limit.sync="form.pageSize"
        :page.sync="form.page"
        :limit.sync="form.rows"
            align="right"
            layout="prev, pager, next,sizes"
            popper-class="select_bottom"
            style="padding: 0;margin-top: 10px;"
        @pagination="getRouteSearch"
          />
        </div>
        <div style="margin:0 20px;width: 71%;">
          <el-table
            :data="tableData2"
            border
            height="500px"
            style="width: 100%;"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
          >
            <el-table-column label="" prop="" type="index" />
            <el-table-column label="工序编码" prop="gxbm" />
            <el-table-column label="工序名称" prop="gxmc" />
            <el-table-column label="工序检验" prop="gxjy" />
            <el-table-column label="初始节拍" prop="csjp" />
            <el-table-column label="初始型腔数" prop="csxqs" />
            <el-table-column label="初始工价" prop="csgj">
              <template slot-scope="{row}">
                <div>{{ row.csgj }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="编辑操作">
              <template slot-scope="{row}">
                <el-tooltip content="新增" placement="top">
                  <el-button type="text" icon="el-icon-circle-plus-outline" />
                </el-tooltip>
                <el-tooltip content="修改" placement="top">
                  <el-button type="text" icon="el-icon-edit" />
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button type="text" icon="el-icon-delete" />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="关联工作站">
              <template slot-scope="{row}">
                <el-tooltip content="工作站" placement="top">
                  <el-button type="text" icon="el-icon-share" @click="shareClick(row)" />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <div style="height: 100px;border: 1px solid #eee; margin-top: 20px">
            <div style="margin: 20px;color:#42b983;">工艺路线</div>
            <div>
              <el-steps
                style="display:flex;
                margin-top: -25px;
                justify-content: center;"
                :space="400"
                :active="3"
                align-center
              >

                <el-step title="下料" />
                <el-step title="电化学" />
                <el-step title="清洗烘干" />
              </el-steps>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="关联工作站"
      :title="operation==='add'?'新增':'修改'"
        :visible.sync="dialogVisible"
        width="50%"
        top="5vh"
      width="80%"
      top="15vh"
        @closed="handleClose"
      @close="handleClose"
      >
        <el-divider />
        <div style="margin-bottom: 10px;">
          <i class="el-icon-s-comment" style="color:#42b983;" /> å·¥åºåç§°ï¼š{{ dialogGxmc }}
      <el-form ref="dialogForm" :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <div style="display: flex">
          <el-form-item label="工艺编码" prop="OrgCode" style="margin-right: 20px">
            <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 220px" />
          </el-form-item>
          <el-form-item label="工艺名称" prop="OrgName">
            <el-input v-model="dialogForm.OrgName" style="width: 220px" />
          </el-form-item>
        </div>
        <div>
          <!--        <template>-->
          <el-radio-group v-model="dialogRadioValue" @change="dialogRadioChange($event)">
            <el-radio
              v-for="item in dialogContentArr"
              :key="item.id"

              :label="item.name"
              border
              size="medium"
        <div style="display: flex">
          <el-form-item prop="SupUnit" label="使用状态" style="margin-right: 20px">
            <el-select
              v-model="dialogForm.isEnable"
              style="width: 220px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in SupUnitArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            <!--            v-model="item.id"-->
          </el-radio-group>
          <!--        </template>-->
            </el-select>
          </el-form-item>
          <el-form-item label="工艺描述" prop="OrgName">
            <el-input v-model="dialogForm.OrgName" type="textarea" style="width: 220px" />
          </el-form-item>
        </div>
        <div style="height: 350px;border: 1px solid #eee; margin-top: 20px;overflow-y:scroll">
          <el-tree
            ref="tree"
            style="margin-left: 10px;"
            :data="treeData"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            @node-click="nodeClick"
        <el-form-item label="工艺设置" prop="OrgName">
          <div style="display: flex;width:100%;overflow-y: scroll">
            <!--   å®žçŽ°å·¥è‰ºè®¾ç½®åŠ¨æ€æ·»åŠ -->
            <div v-for="(tag,index) in dynamicTags" :key="tag.id" style="display: flex;">
              <el-tag
                v-if="flag||tag.label!==flagSelected"
                closable
                :disable-transitions="false"
                style="margin-left: 0;width: 100px;"
                :class="tagClass(tag.label)"
                :effect="tag.effect"
                @close="handleTagClose(tag.label)"
                @click="elTagClick(tag)"
          >
            <!--          :props="defaultProps"-->
                {{ tag.label }}
                <i class="el-icon-edit" @click="tagEdit(tag)" />
              </el-tag>

            <div slot-scope="{node,data}" style="display: flex;justify-content: space-between;width: 80%;">
              <div>{{ node.label.split('&')[0] }}</div>
              <div>{{ node.label.split('&')[1] }}</div>
              <el-autocomplete
                v-if="!flag&&tag.label===flagSelected"
                :ref="'saveTagInput'+tag.id"
                v-model="value"
                class="input-new-tag"
                size="small"
                :fetch-suggestions="querySearch"
                style="margin-left: 0px;width: 100px;transform: translate(1)"
                autofocus
                @select="handleSelect"
                @keyup.enter.native="handleInputConfirm2"
              />
              <!--        @blur="handleBlur2"-->

              <div v-if="index!==dynamicTags.length-1" style="width: 40px;">----></div>
            </div>
            <!--            :disabled="addDisabled"-->
            <el-button type="primary" style="margin-left: 20px;width: 100px;height: 32px;" size="small" @click="showInput">+
              æ·»åŠ 
            </el-button>

          </el-tree>
        </div>

        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">ç¡® å®š</el-button>
        </div>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>

import Pagination from '@/components/Pagination'
import { cellStyle } from '@/utils/global'
import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'
import { getCookie } from '@/utils/auth'
import { RouteSearch } from '@/api/zzmx'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  name: 'Gylx',
  name: 'Zzjg',
  components: {
    Pagination
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入编码'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('编码不能为中文'))
        } else {
          callback()
        }
      }
    }
    const validateTypeCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择上级'))
      } else {
        callback()
      }
    }
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        pageNum: 1, // ç¬¬å‡ é¡µ
        pageSize: 10, // æ¯é¡µå¤šå°‘条
        gylx: '', // å…¬ç›Šè·¯çº¿
        wlbm: '', // ç‰©æ–™ç¼–码
        wlmc: ''// ç‰©æ–™åç§°
        routecode: '', // å·¥è‰ºè·¯çº¿ç¼–码
        routename: '', // å·¥è‰ºè·¯çº¿åç§°
        description: '', // å·¥è‰ºè·¯çº¿æè¿°
        createuser: '', // åˆ›å»ºäººå‘˜
        prop: 'lm_date', // æŽ’序字段
        order: 'desc', // æŽ’序字段
        page: 1, // ç¬¬å‡ é¡µ
        rows: 10 // æ¯é¡µå¤šå°‘条
      },
      isEnable: [
        { label: '是', value: 'Y' },
        { label: '否', value: 'N' }
      ],
      total: 10,
      tableData1: [
        { id: 1, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 2, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 3, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 4, isSelect: true, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676端件', wlgg: '676', jszx: '1' },
        { id: 5, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676端件', wlgg: '676', jszx: '1' },
        { id: 6, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 7, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 8, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 9, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 10, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' }
      ],
      radioValue: '',
      radioValueId: 0,
      tableData2: [
        { id: 1, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 2, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 3, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 4, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 5, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 6, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' }
      ],
      dialogVisible: false,
      dialogGxmc: '',
      dialogContentArr: [
        { id: 1, name: '机加C41' },
        { id: 2, name: '机加C42' },
        { id: 3, name: '机加C43' },
        { id: 4, name: '机加C44' },
        { id: 5, name: '机加C45' },
        { id: 6, name: '机加C46' },
        { id: 8, name: '机加C47' },
        { id: 9, name: '机加C48' },
        { id: 10, name: '机加C49' },
        { id: 11, name: '机加C50' },
        { id: 12, name: '机加C51' },
        { id: 13, name: 'GP12外观包装C39' },
        { id: 14, name: 'Gp12外观检清洗烘干包装C40' },
        { id: 15, name: 'GP12外观包装C38' },
        { id: 16, name: 'GP12外观包装C37' },
        { id: 17, name: 'GP12外观包装C36' },
        { id: 18, name: '返回返修车间' },
        { id: 19, name: '设置休闲区' },
        { id: 20, name: '空压机房' }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      tableData: [],
      dialogVisible: true,
      dialogForm: {
        OrgType: '',
        OrgCode: '',
        OrgName: '',
        SupUnit: ''// ä¸Šçº§å•ä½
      },
      treeData: [
        {
          id: 1,
          label: '选择全部',
          children: [
            {
              id: 2,
              label: '二级 1-1',
              children: [{
                id: 3,
                label: '三级 1-1-1&LKFDL_SC-PC028'
              }, {
                id: 4,
                label: '三级 1-1-2&LKFDL_SC-PC029'
      dynamicTags: [// å·¥è‰ºè®¾ç½®æ•°ç»„
        { id: 1, label: '标签一', effect: 'light' },
        { id: 2, label: '标签二', effect: 'light' },
        { id: 3, label: '标签三', effect: 'light' }
      ],
      tagSelectedId: '', // tag选择中id
      flag: true,
      flagSelected: '', // åˆ¤æ–­æ˜¯å¦é€‰ä¸­
      value: '',
      restaurants: [],
      addDisabled: false,

              }, {
                id: 5,
                label: '三级 1-1-1&LKFDL_SC-PC030'
              }, {
                id: 6,
                label: '三级 1-1-2&LKFDL_SC-PC031'

              }]
            },
            {
              id: 7,
              label: '二级 1-1',
              children: [{
                id: 8,
                label: '三级 2-1-1&LKFDL_SC-PC028'
              }, {
                id: 9,
                label: '三级 2-1-1&LKFDL_SC-PC029'

              }, {
                id: 10,
                label: '三级 2-1-1&LKFDL_SC-PC027'
              }, {
                id: 11,
                label: '三级 2-1-1&LKFDL_SC-PC026'

              }
              ]
            },
            {
              id: 12,
              label: '二级 1-1',
              children: [{
                id: 13,
                label: '三级 3-1-1&LKFDL_SC-PC023'
              }, {
                id: 14,
                label: '三级 3-1-1&LKFDL_SC-PC024'

              }, {
                id: 15,
                label: '三级 3-1-1&LKFDL_SC-PC025'
              }, {
                id: 16,
                label: '三级 3-1-1&LKFDL_SC-PC026'
              }
              ]
            }
      operation: '',
      dialogFormRules: {
        OrgType: [
          { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] }
        ],
        OrgCode: [
          { required: true, validator: validateName, trigger: ['blur', 'change'] }
        ],
        OrgName: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ],
        SupUnit: [
          { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] }
          ]
        }

      ],
      dialogRadioValue: '',
      dialogRadioValueId: 0
    }
  },
  created() {

    this.getRouteSearch()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.restaurants = this.loadAll()
  },
  methods: {
    // å¯¼å…¥
    upLoad() {
      // const isLt100M = param.file.size / 1024 / 1024 < 50
      // if (!isLt100M) {
      //   this.$message('请检查，上传文件大小不能超过50MB!')
      //   return
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // è°ƒç”¨ callback è¿”回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll() {
      return [
        { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
        { 'value': 'Hot honey é¦–尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
        { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
        { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
        { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1å¹¢18号楼一层商铺18-101' },
        { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
        { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
        { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' }
      ]
    },
    handleSelect(item) {
      console.log(item)
    },
    handleInputConfirm2() {
      console.log(this.flagSelect, 111)
      // this.dynamicTags.forEach((item,index) => {
      //   if (item === this.flagSelect) {
      //     console.log(item, 111)
      //     item = this.flagSelect
      // }
      // const formData = new FormData()
      // formData.append('file', param.file)
      // formData.append('formId', this.formId)
      //
      // this.loading = true
      // const _self = this
      // uploadTable(formData).then(res => {
      //   this.$message(res.data.message)
      //   param.data.fbsl = res.data.data.total
      //   _self.loading = false
      //   this.dataList = JSON.parse(JSON.stringify(this.dataList))
      // }).catch(() => {
      //   _self.loading = false
      // })
      console.log(this.value)
      this.addDisabled = false
      this.flagSelect = ''
      this.value = ''
      this.flag = !this.flag
    },
    // å¯¼å‡º
    async downLoad() {
      // const res = await downFile(row.id)
      // if (res) {
      //   // console.log(res)
      //   const fileName = row.filename
      //   // const fileName = '杭州市检察工作绩效评价（表一）' + '.xls'
      //   // let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) // xlsx
      //   // const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // xls
      //   const blob = new Blob([res.data], { type: res.data.type }) // xls
      //   if ('download' in document.createElement('a')) { // éžIE下载
      //     const elink = document.createElement('a')
      //     elink.download = fileName
      //     elink.style.display = 'none'
      //     elink.href = URL.createObjectURL(blob)
      //     document.body.appendChild(elink)
      //     elink.click()
      //     URL.revokeObjectURL(elink.href) // é‡Šæ”¾URL å¯¹è±¡
      //     document.body.removeChild(elink)
      //   } else { // IE10+下载
      //     navigator.msSaveBlob(blob, fileName)
      //   }
      // }
    tagEdit(tag) {
      this.addDisabled = true
      this.flagSelect = tag.label
      this.value = tag.label
      this.flag = !this.flag
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + tag.id][0].focus()
      })
    },
    radioValueChange(val) {
      console.log(val)
    elTagClick(tag) {
      console.log(tag)

      this.tagSelectedId = tag.id
      if (tag.effect === 'dark') {
        tag.effect = 'light'
        this.tagSelectedId = ''
      } else {
        this.dynamicTags.forEach(item => {
          item.effect = 'light'
        })
        if (tag.effect === 'light') {
          tag.effect = 'dark'
        } else if (tag.effect === 'dark') {
          tag.effect = 'light'
        }
      }

      console.log(this.$el)
      // console.log(this.$el.style.color = 'red')
    },

    // å¯¹è¯æ¡†ä¸­æŸ¥è¯¢id
    dialogRadioChange(val) {
      this.dialogContentArr.forEach(item => {
        if (item.name === val) {
          this.dialogRadioValueId = item.id
    tagClass() {
      // this.tagSelect.style({ backgroundColor: 'red' })
      // return { backgroundColor: 'red' }
    },
    handleTagClose(tag) {
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      this.dynamicTags.forEach((item, index) => {
        if (item.label === tag) {
          console.log(item.label === tag)
          this.dynamicTags.splice(index, 1)
        }
      })
    },
    nodeClick(obj, node, data) {
      // console.log(obj, node, data)
    },
    // å¯¹è¯æ¡†ç¡®è®¤æŒ‰é’®
    dialogVisibleConfirm() {
      // å¾—到的树形节点
      const treeIdArr = this.$refs.tree.getCheckedKeys()
      // å•é€‰æ¡†id
      // this.dialogRadioValueId

      this.dialogVisible = false
    showInput() {
      // this.inputVisible = true
      this.addDisabled = true
      if (this.tagSelectedId === '' || this.tagSelectedId === this.dynamicTags.length) {
        this.dynamicTags.push(
          { id: (this.dynamicTags.length + 1), label: '', effeft: 'light' }
        )
      } else {
        console.log(this.tagSelectedId, 31)
        this.dynamicTags.splice(this.tagSelectedId, 0, { id: this.dynamicTags.length + 1, label: '', effect: 'light' })
      }
      this.flag = !this.flag
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + this.dynamicTags.length ][0].focus()
      })
      // this.$nextTick(_ => {
      //   console.log(this.$refs['saveTagInput'], 321)
      //   this.$refs.saveTagInput.$refs.input.focus()
      // })
    },
    // å…³è”工作站点击事件
    shareClick(row) {
    async getRouteSearch() {
      const res = await RouteSearch(this.form)
      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.getRouteSearch()
    },
    // æŸ¥è¯¢
    search() {
      this.getRouteSearch()
    },
    upload() {

    },
    // é‡ç½®
    reset() {
      this.form.OrgCode = ''
      this.form.OrgName = ''
      this.form.OrgType = ''
      this.form.UserName = ''
      this.getRouteSearch()
    },

    // æ–°å¢žæŒ‰é’®
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogGxmc = row.gxmc
    },
    // å¯¹è¯æ¡†å…³é—­ä¹‹å‰å¤„理
    // ä¿®æ”¹æŒ‰é’®
    edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      this.$nextTick(() => {
        this.dialogForm.OrgCode = row.org_code
        this.dialogForm.OrgName = row.org_name
        this.dialogForm.SupUnit = row.parent_id
      })
    },
    // åˆ é™¤æŒ‰é’®
    async del(id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteOrganization({ orgid: id }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            this.getRouteSearch()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // å¯¹è¯æ¡†å…³é—­äº‹ä»¶
    handleClose() {
      this.dialogRadioValue = ''
      this.$refs.tree.setCheckedKeys([])
      this.dialogForm.OrgType = ''
      this.dialogForm.OrgCode = ''
      this.dialogForm.OrgName = ''
      this.dialogForm.SupUnit = ''
      this.$refs.dialogForm.clearValidate()
    },
    // å¯¹è¯æ¡†å–消
    dialogVisibleCancel() {
      this.dialogVisible = false
      this.dialogRadioValue = ''
      this.$refs.tree.setCheckedKeys([])
    },
    // é‡ç½®äº‹ä»¶
    reset() {
      this.form.gylx = ''
      this.form.wlbm = ''
      this.form.wlmc = ''
    },
    // // å¤„理表头单元格样式
    // headerCellStyle() {
    //   const option = {
    //     background: '#eee', padding: '5px 0'
    // å¯¹è¯æ¡†ç¡®è®¤
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const data = {
            OrganType: this.dialogFormOrgTypeSelected,
            OrganCode: this.dialogForm.OrgCode,
            OrganName: this.dialogForm.OrgName,
            SupUnit: this.dialogFormOrgTypeSelected === 'F' ? '0' : this.dialogForm.SupUnit,
            OperType: this.operation === 'add' ? 'Add' : 'Update',
            Operator: getCookie('admin')
          }
          // AddUpdateOrganization(data).then(res => {
          //   if (res.code === '200') {
          //     this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
          //     this.dialogVisible = false
          //     this.getRouteSearch()
          //   } else {
          //     this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
    //   }
    //   return option
    // },
    // // å¤„理表头行样式
    // headerRowStyle() {
    //
    // },
    // // å¤„理表格单元格样式
    // cellStyle() {
    //   // return {padding: '5px 0'}
    //   return { padding: '0' }
    // },
    // æŸ¥è¯¢äº‹ä»¶
    async search() {
      const data = this.form
      console.log(data)
      // const res=await xxx(data)
          // })
        }
      })
    },
    // èŽ·å–页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
      })
    }
  }
}
@@ -468,40 +525,95 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  padding: 0 20px;
}

::v-deep .el-button--info {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: $main_color !important;
}

::v-deep .el-button--text {
  color: $main_color;
  font-size: 14px;
::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-step__head.is-finish {
  color: $main_color;
  border-color: $main_color;;
.footerButton {
  display: flex;
  justify-content: end;
}

::v-deep .el-step__title.is-finish {
  color: $main_color;
::v-deep .el-button--default {
  background-color: #ffffff !important;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px 30px 0px 0;

::v-deep .el-button--default:hover {
  color: #606266;
}

::v-deep .el-icon-caret-right:before {
  content: '' !important;
::v-deep .el-dialog__body {
  padding: 20px 100px !important;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: $main_color;
  border-color: $main_color;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color;
  color: $main_color !important;
}

::v-deep .el-radio.is-bordered.is-checked {
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
}

::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}

::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}

::v-deep .cell {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

::v-deep .el-button--text {
  color: $main_color;
  font-size: 14px;
  cursor: pointer;
}

.operationClass {
  height: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-icon-share {
  color: $main_color;
  cursor: pointer;
}

.el-checkbox.is-bordered.is-checked {
  border-color: $main_color;
}

@@ -510,17 +622,35 @@
  background: $main_color;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
  background: $main_color;
}

/*::v-deep .el-divider--horizontal{*/
/*  margin:0 0 10px 0;*/
/*}*/
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: $main_color !important;
}

::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin: 10px 30px 0px 0;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px 30px 0px 0;
}

.body ::v-deep .el-divider {
  border: 1px solid #eee;
  width: 99%;
  margin: 10px auto;
}

.body ::v-deep .el-form-item {
  margin-bottom: 0;
}

</style>

 src/views/zzmx/gylx_bak.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,526 @@
<template>
  <div>
    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;">
      <div style="margin-bottom: 20px;">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          inline
          style="display: flex;justify-content: space-between"
        >
          <div style="display: flex;justify-content: space-around;width: 85%">
            <el-form-item label="公益路线">
              <el-input v-model="form.gylx" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="物料编码">
              <el-input v-model="form.wlbm" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="物料名称">
              <el-input v-model="form.wlmc" placeholder="请输入" />
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button type="text" style="display: flex;align-items: start;padding-top: 10px;" @click="reset">重置
            </el-button>
          </div>
        </el-form>
        <div style="display: flex;justify-content: space-between">

          <div style="display:flex;">
            <el-button type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
            <el-button type="primary" icon="el-icon-delete">修改</el-button>
            <el-button type="primary" icon="el-icon-delete">删除</el-button>
            <el-button type="primary" icon="el-icon-upload2" @click="upLoad">导入</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downLoad">导出</el-button>
          </div>

          <div style="display: flex;justify-content: end;margin-right: 20px">
            <el-button type="text" icon="el-icon-document">查看我的工作日志</el-button>
          </div>

        </div>
      </div>
      <div style="display: flex;width: 100%;">
        <div>
          <el-table
            :data="tableData1"
            style="width: 100%;border: 1px solid #eee"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
          >
            <el-table-column type="selection">
              <!--              <template slot-scope="{row}">-->

              <!--                &lt;!&ndash;                {{ row.isSelect }}&ndash;&gt;-->

              <!--                &lt;!&ndash;                <el-radio :key="row.id" v-model="row.id" @change="radioValueChange($event)" />&ndash;&gt;-->
              <!--              </template>-->
            </el-table-column>
            <el-table-column label="工艺路线" prop="gylx" />
            <el-table-column show-overflow-tooltip label="物料编码" prop="wlbm" />
            <el-table-column show-overflow-tooltip label="物料名称" prop="wlmc" />
            <el-table-column label="物料规格" prop="wlgg" />
            <el-table-column label="结束装箱" prop="jszx">
              <template slot-scope="{row}">
                <div v-if="row.jszx==='1'">是</div>
                <div v-if="row.jszx==='0'">否</div>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="form.pageNum"
            :limit.sync="form.pageSize"
            align="right"
            layout="prev, pager, next,sizes"
            popper-class="select_bottom"
            style="padding: 0;margin-top: 10px;"
          />
        </div>
        <div style="margin:0 20px;width: 71%;">
          <el-table
            :data="tableData2"
            border
            height="500px"
            style="width: 100%;"
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
          >
            <el-table-column label="" prop="" type="index" />
            <el-table-column label="工序编码" prop="gxbm" />
            <el-table-column label="工序名称" prop="gxmc" />
            <el-table-column label="工序检验" prop="gxjy" />
            <el-table-column label="初始节拍" prop="csjp" />
            <el-table-column label="初始型腔数" prop="csxqs" />
            <el-table-column label="初始工价" prop="csgj">
              <template slot-scope="{row}">
                <div>{{ row.csgj }}元</div>
              </template>
            </el-table-column>
            <el-table-column label="编辑操作">
              <template slot-scope="{row}">
                <el-tooltip content="新增" placement="top">
                  <el-button type="text" icon="el-icon-circle-plus-outline" />
                </el-tooltip>
                <el-tooltip content="修改" placement="top">
                  <el-button type="text" icon="el-icon-edit" />
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button type="text" icon="el-icon-delete" />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="关联工作站">
              <template slot-scope="{row}">
                <el-tooltip content="工作站" placement="top">
                  <el-button type="text" icon="el-icon-share" @click="shareClick(row)" />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <div style="height: 100px;border: 1px solid #eee; margin-top: 20px">
            <div style="margin: 20px;color:#42b983;">工艺路线</div>
            <div>
              <el-steps
                style="display:flex;
                margin-top: -25px;
                justify-content: center;"
                :space="400"
                :active="3"
                align-center
              >

                <el-step title="下料" />
                <el-step title="电化学" />
                <el-step title="清洗烘干" />
              </el-steps>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="关联工作站"
        :visible.sync="dialogVisible"
        width="50%"
        top="5vh"
        @closed="handleClose"
      >
        <el-divider />
        <div style="margin-bottom: 10px;">
          <i class="el-icon-s-comment" style="color:#42b983;" /> å·¥åºåç§°ï¼š{{ dialogGxmc }}
        </div>
        <div>
          <!--        <template>-->
          <el-radio-group v-model="dialogRadioValue" @change="dialogRadioChange($event)">
            <el-radio
              v-for="item in dialogContentArr"
              :key="item.id"

              :label="item.name"
              border
              size="medium"
            />
            <!--            v-model="item.id"-->
          </el-radio-group>
          <!--        </template>-->
        </div>
        <div style="height: 350px;border: 1px solid #eee; margin-top: 20px;overflow-y:scroll">
          <el-tree
            ref="tree"
            style="margin-left: 10px;"
            :data="treeData"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            @node-click="nodeClick"
          >
            <!--          :props="defaultProps"-->

            <div slot-scope="{node,data}" style="display: flex;justify-content: space-between;width: 80%;">
              <div>{{ node.label.split('&')[0] }}</div>
              <div>{{ node.label.split('&')[1] }}</div>
            </div>

          </el-tree>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleCancel">取 æ¶ˆ</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">ç¡® å®š</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>

import Pagination from '@/components/Pagination'
import { cellStyle } from '@/utils/global'

export default {
  name: 'Gylx',
  components: {
    Pagination
  },
  data() {
    return {
      form: {
        pageNum: 1, // ç¬¬å‡ é¡µ
        pageSize: 10, // æ¯é¡µå¤šå°‘条
        gylx: '', // å…¬ç›Šè·¯çº¿
        wlbm: '', // ç‰©æ–™ç¼–码
        wlmc: ''// ç‰©æ–™åç§°
      },
      total: 10,
      tableData1: [
        { id: 1, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 2, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 3, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '圆钢F45MnVS20', wlgg: '20', jszx: '1' },
        { id: 4, isSelect: true, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676端件', wlgg: '676', jszx: '1' },
        { id: 5, isSelect: false, gylx: 'R0145', wlbm: '1403-001-0001', wlmc: '676端件', wlgg: '676', jszx: '1' },
        { id: 6, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 7, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 8, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 9, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' },
        { id: 10, isSelect: false, gylx: 'R0145', wlbm: '', wlmc: '', wlgg: '', jszx: '1' }
      ],
      radioValue: '',
      radioValueId: 0,
      tableData2: [
        { id: 1, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 2, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 3, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 4, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 5, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' },
        { id: 6, gxbm: 'G0000', gxmc: '下料', gxjy: 'N', csjp: '10秒', csxqs: '1', csgj: '1' }
      ],
      dialogVisible: false,
      dialogGxmc: '',
      dialogContentArr: [
        { id: 1, name: '机加C41' },
        { id: 2, name: '机加C42' },
        { id: 3, name: '机加C43' },
        { id: 4, name: '机加C44' },
        { id: 5, name: '机加C45' },
        { id: 6, name: '机加C46' },
        { id: 8, name: '机加C47' },
        { id: 9, name: '机加C48' },
        { id: 10, name: '机加C49' },
        { id: 11, name: '机加C50' },
        { id: 12, name: '机加C51' },
        { id: 13, name: 'GP12外观包装C39' },
        { id: 14, name: 'Gp12外观检清洗烘干包装C40' },
        { id: 15, name: 'GP12外观包装C38' },
        { id: 16, name: 'GP12外观包装C37' },
        { id: 17, name: 'GP12外观包装C36' },
        { id: 18, name: '返回返修车间' },
        { id: 19, name: '设置休闲区' },
        { id: 20, name: '空压机房' }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [
        {
          id: 1,
          label: '选择全部',
          children: [
            {
              id: 2,
              label: '二级 1-1',
              children: [{
                id: 3,
                label: '三级 1-1-1&LKFDL_SC-PC028'
              }, {
                id: 4,
                label: '三级 1-1-2&LKFDL_SC-PC029'

              }, {
                id: 5,
                label: '三级 1-1-1&LKFDL_SC-PC030'
              }, {
                id: 6,
                label: '三级 1-1-2&LKFDL_SC-PC031'

              }]
            },
            {
              id: 7,
              label: '二级 1-1',
              children: [{
                id: 8,
                label: '三级 2-1-1&LKFDL_SC-PC028'
              }, {
                id: 9,
                label: '三级 2-1-1&LKFDL_SC-PC029'

              }, {
                id: 10,
                label: '三级 2-1-1&LKFDL_SC-PC027'
              }, {
                id: 11,
                label: '三级 2-1-1&LKFDL_SC-PC026'

              }
              ]
            },
            {
              id: 12,
              label: '二级 1-1',
              children: [{
                id: 13,
                label: '三级 3-1-1&LKFDL_SC-PC023'
              }, {
                id: 14,
                label: '三级 3-1-1&LKFDL_SC-PC024'

              }, {
                id: 15,
                label: '三级 3-1-1&LKFDL_SC-PC025'
              }, {
                id: 16,
                label: '三级 3-1-1&LKFDL_SC-PC026'
              }
              ]
            }
          ]
        }

      ],
      dialogRadioValue: '',
      dialogRadioValueId: 0
    }
  },
  created() {

  },
  methods: {
    // å¯¼å…¥
    upLoad() {
      // const isLt100M = param.file.size / 1024 / 1024 < 50
      // if (!isLt100M) {
      //   this.$message('请检查，上传文件大小不能超过50MB!')
      //   return
      // }
      // const formData = new FormData()
      // formData.append('file', param.file)
      // formData.append('formId', this.formId)
      //
      // this.loading = true
      // const _self = this
      // uploadTable(formData).then(res => {
      //   this.$message(res.data.message)
      //   param.data.fbsl = res.data.data.total
      //   _self.loading = false
      //   this.dataList = JSON.parse(JSON.stringify(this.dataList))
      // }).catch(() => {
      //   _self.loading = false
      // })
    },
    // å¯¼å‡º
    async downLoad() {
      // const res = await downFile(row.id)
      // if (res) {
      //   // console.log(res)
      //   const fileName = row.filename
      //   // const fileName = '杭州市检察工作绩效评价（表一）' + '.xls'
      //   // let blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) // xlsx
      //   // const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) // xls
      //   const blob = new Blob([res.data], { type: res.data.type }) // xls
      //   if ('download' in document.createElement('a')) { // éžIE下载
      //     const elink = document.createElement('a')
      //     elink.download = fileName
      //     elink.style.display = 'none'
      //     elink.href = URL.createObjectURL(blob)
      //     document.body.appendChild(elink)
      //     elink.click()
      //     URL.revokeObjectURL(elink.href) // é‡Šæ”¾URL å¯¹è±¡
      //     document.body.removeChild(elink)
      //   } else { // IE10+下载
      //     navigator.msSaveBlob(blob, fileName)
      //   }
      // }
    },
    radioValueChange(val) {
      console.log(val)
    },

    // å¯¹è¯æ¡†ä¸­æŸ¥è¯¢id
    dialogRadioChange(val) {
      this.dialogContentArr.forEach(item => {
        if (item.name === val) {
          this.dialogRadioValueId = item.id
        }
      })
    },
    nodeClick(obj, node, data) {
      // console.log(obj, node, data)
    },
    // å¯¹è¯æ¡†ç¡®è®¤æŒ‰é’®
    dialogVisibleConfirm() {
      // å¾—到的树形节点
      const treeIdArr = this.$refs.tree.getCheckedKeys()
      // å•é€‰æ¡†id
      // this.dialogRadioValueId

      this.dialogVisible = false
    },
    // å…³è”工作站点击事件
    shareClick(row) {
      this.dialogVisible = true
      this.dialogGxmc = row.gxmc
    },
    // å¯¹è¯æ¡†å…³é—­ä¹‹å‰å¤„理
    handleClose() {
      this.dialogRadioValue = ''
      this.$refs.tree.setCheckedKeys([])
    },
    dialogVisibleCancel() {
      this.dialogVisible = false
      this.dialogRadioValue = ''
      this.$refs.tree.setCheckedKeys([])
    },
    // é‡ç½®äº‹ä»¶
    reset() {
      this.form.gylx = ''
      this.form.wlbm = ''
      this.form.wlmc = ''
    },
    // // å¤„理表头单元格样式
    // headerCellStyle() {
    //   const option = {
    //     background: '#eee', padding: '5px 0'
    //   }
    //   return option
    // },
    // // å¤„理表头行样式
    // headerRowStyle() {
    //
    // },
    // // å¤„理表格单元格样式
    // cellStyle() {
    //   // return {padding: '5px 0'}
    //   return { padding: '0' }
    // },
    // æŸ¥è¯¢äº‹ä»¶
    async search() {
      const data = this.form
      console.log(data)
      // const res=await xxx(data)
    }
  }
}
</script>

<style lang="scss" scoped>
$main_color: #42b983;
::v-deep .el-button--primary {
  background-color: $main_color !important;
  height: 30px;
  display: flex;
  align-items: center;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: $main_color !important;
}

::v-deep .el-button--text {
  color: $main_color;
  font-size: 14px;
}

::v-deep .el-step__head.is-finish {
  color: $main_color;
  border-color: $main_color;;
}

::v-deep .el-step__title.is-finish {
  color: $main_color;
}

::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px 30px 0px 0;

}

::v-deep .el-icon-caret-right:before {
  content: '' !important;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: $main_color;
}

::v-deep .el-radio.is-bordered.is-checked {
  border-color: $main_color;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: $main_color;
  background: $main_color;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: $main_color;
  background-color: $main_color;
}

/*::v-deep .el-divider--horizontal{*/
/*  margin:0 0 10px 0;*/
/*}*/
</style>

 vue.config.js

@@ -28,6 +28,18 @@
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  // css: {
  //   loaderOptions: {
  //     css: {},
  //     postcss: {
  //       plugins: [
  //         require('postcss-px2rem')({
  //           remUnit: 192// /设计图宽度/10
  //         })
  //       ]
  //     }
  //   }
  // },
  productionSourceMap: false,
  devServer: {
    port: port,