1.做适应平板显示的内容大小

loulijun2021

2022-08-05 d33eacc1f85ac3a736b33ba4713a19aae466d711

 src/views/zzmx/gylx.vue

@@ -5,12 +5,12 @@
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-width="100px"
          inline
          style="display: flex;justify-content: space-between"
        >
          <div class="elForm">
            <el-form-item label="工艺编码" style=" display: flex;">
            <el-form-item label="工艺路线编码" style=" display: flex;">
              <el-input v-model="form.routecode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="工艺名称" style=" display: flex;">
@@ -32,7 +32,7 @@
      <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>
        <!--        <el-button type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>-->
      </div>
      <el-divider />
      <div class="elTableDiv">
@@ -40,6 +40,7 @@
          :data="tableData"
          :height="tableHeight"
          border
          stripe
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
@@ -89,14 +90,17 @@
            prop="lm_date"
            label="创建时间"
            sortable="custom"
            width="160"
          />
          <el-table-column
            label="操作"
            width="120"
          >
            <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="edit('edit',row)">编辑</el-button>-->
                <el-button type="text" @click="edit('edit',row)">预览</el-button>
                <el-button type="text" @click="del(row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
@@ -116,26 +120,29 @@
    </div>

    <el-dialog
      :title="operation==='add'?'新增':'修改'"
      :title="operation==='add'?'新增':'预览'"
      :visible.sync="dialogVisible"
      width="80%"
      top="15vh"
      width="1000px"
      :close-on-click-modal="false"
      :top="isIpad?'5vh':'15vh'"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" :rules="dialogFormRules" :model="dialogForm" label-width="80px">
      <el-form ref="dialogForm" style="height: 500px" :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <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 label="工艺路线编码" prop="code" style="margin-right: 20px">
            <el-input v-model="dialogForm.code" :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="name">
            <el-input v-model="dialogForm.name" :disabled="operation==='edit'" style="width: 220px" />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item prop="SupUnit" label="使用状态" style="margin-right: 20px">
          <el-form-item prop="enable" label="使用状态" style="margin-right: 20px">
            <el-select
              v-model="dialogForm.isEnable"
              v-model="dialogForm.enable"
              filterable
              :disabled="operation==='edit'"
              :popper-append-to-body="false"
              style="width: 220px"
              placeholder="请选择"
@@ -148,51 +155,88 @@
              />
            </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 label="工艺描述" prop="description">
            <el-input v-model="dialogForm.description" :disabled="operation==='edit'" type="textarea" style="width: 220px" />
          </el-form-item>
        </div>
        <el-form-item label="工艺设置" prop="OrgName">
        <el-form-item label="工艺设置" prop="Data" style="margin-top: 30px">
          <div class="settingDiv">
            <!--   实现工艺设置动态添加-->
            <div v-for="(tag,index) in dynamicTags" :key="tag.id" style="display: flex;align-items: center">
              <div style="display: flex;align-items: center;position: relative">
            <div v-for="(tag,index) in dynamicTags" :key="tag.seq" style="display: flex;align-items: center">
              <div style="display: flex;align-items: center;position: relative;">
                <div
                  class="orderNumber"
                  :style="{
                    backgroundColor:index===0?'#f8f8fa':'#409EFF',
                    color:index===0?'#c6bbc4':'#FFFFFF',
                    border:index===0?'1px solid #c6bbc4':'1px solid #409EFF',
                    zIndex:tag.label===selectedName?0:2
                  }"
                >
                  {{ index+1 }}
                </div>

                <el-tooltip class="item" effect="dark" :content="tag.label" placement="top">
                  <el-tag
                    v-if="flag||tag.label!==flagSelected"
                    :closable="index!==0"
                    :disable-transitions="false"
                    class="elTag"
                    :class="tagClass(tag.label)"
                    :effect="tag.effect"
                    @close="handleTagClose(tag.label)"
                    @click="elTagClick(tag)"
                  >
                    <!--                <div class="orderNumber">{{ index }}</div>-->
                    {{ tag.label }}
                    <i class="el-icon-edit" @click="tagEdit(tag)" />
                  </el-tag>
                </el-tooltip>
                <!--                <el-tooltip-->
                <!--                  class="item"-->
                <!--                  effect="dark"-->
                <!--                  :content="tag.stepname"-->
                <!--                  placement="top"-->
                <!--                >-->
                <!--                  @close="handleTagClose(tag.stepname)"-->
                <!--                  :closable="index!==0"-->

                <el-tag
                  v-if="tag.stepname!==selectedName"
                  :disable-transitions="false"
                  class="elTag"
                  :effect="tag.effect"
                  @click="elTagClick(tag)"
                >
                  {{ tag.stepname }}
                  <i
                    v-if="tag.editDisabled&&operation!=='edit'"
                    class="el-icon-edit"
                    @click="tagEdit(tag)"
                  />
                </el-tag>
                <!--                </el-tooltip>-->

                <!--                left:tag.stepname===selectedName?'191px':'141px',-->
                <i
                  v-if="index!==0&&tag.editDisabled&&operation!=='edit'"
                  :style="{
                    top:tag.stepname===selectedName?'-2px':'-8px',
                  }"
                  class="el-icon-close"
                  @click="handleTagClose(tag)"
                />
                <el-autocomplete
                  v-if="!flag&&tag.label===flagSelected"
                  :ref="'saveTagInput'+tag.id"
                  v-model="value"
                  v-if="tag.stepname===selectedName"
                  :ref="'saveTagInput'+tag.seq"
                  v-model="autocompleteValue"
                  class="input-new-tag"
                  size="small"
                  :fetch-suggestions="querySearch"
                  style="margin-left: 0;width: 200px;transform: translate(1)"
                  style="margin-left: 0;width: 150px;transform: translate(1)"
                  autofocus
                  :debounce="300"
                  :popper-append-to-body="false"
                  popper-class="autocompleteClass"
                  @select="handleSelect"
                  @keyup.enter.native="handleInputConfirm2"
                  @keyup.enter.native="handleInputConfirm(tag)"
                />
                <!--        @blur="handleBlur2"-->
                <div v-if="index!==dynamicTags.length-1" style="width: 40px;height: 1px;border: 1px solid #42b983" />
                <div
                  v-if="index!==dynamicTags.length-1"
                  style="width: 40px;height: 1px;border: 1px solid #42b983"
                />
              </div>
            </div>
            <!--            :disabled="addDisabled"-->

            <el-button
              v-if="operation!=='edit'"
              type="success"
              :disabled="addDisabled"
              class="tagSuccess"
              size="small"
              icon="el-icon-plus"
@@ -204,8 +248,9 @@
      </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>
          <el-button v-if="operation==='edit'" @click="dialogVisibleCancel">返 回</el-button>
          <el-button v-if="operation!=='edit'" @click="dialogVisibleCancel">取 消</el-button>
          <el-button v-if="operation!=='edit'" type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>
@@ -214,13 +259,11 @@

<script>
import Pagination from '@/components/Pagination'
import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'
import { getCookie } from '@/utils/auth'
import { RouteSearch } from '@/api/zzmx'
import { AddUpdateRoute, DeleteRoute, RouteSearch, StepSelect, ViewRoute } from '@/api/zzmx'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  name: 'Zzjg',
  name: 'GYLX',
  components: {
    Pagination
  },
@@ -236,14 +279,8 @@
        }
      }
    }
    const validateTypeCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择上级'))
      } else {
        callback()
      }
    }
    return {
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
@@ -254,7 +291,7 @@
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 10 // 每页多少条
        rows: 20 // 每页多少条
      },
      isEnableArr: [
        { label: '是', value: 'Y' },
@@ -262,39 +299,41 @@
      ],
      total: 10,
      tableData: [],
      dialogVisible: true,
      dialogVisible: false,
      dialogForm: {
        OrgType: '',
        OrgCode: '',
        OrgName: '',
        SupUnit: ''// 上级单位
        id: '',
        code: '',
        name: '',
        enable: 'Y',
        description: '',
        Data: []
      },
      dynamicTags: [// 工艺设置数组
        { id: 1, label: '标签一', effect: 'light' },
        { id: 2, label: '标签二', effect: 'light' },
        { id: 3, label: '标签三', effect: 'light' }
        { editDisabled: true, stepcode: 'Step01', seq: 1, stepname: ' ', effect: 'light' }
        // { editDisabled: true, stepcode: 'Step02', seq: 2, stepname: '奶', effect: 'light' },
        // { editDisabled: true, stepcode: 'Step03', seq: 3, stepname: '大', effect: 'light' }
      ],
      tagSelectedId: '', // tag选择中id
      flag: true,
      flagSelected: '', // 判断是否选中
      value: '',
      restaurants: [],
      addDisabled: false,

      clickSelected: '', // 鼠标点击选中的值
      selectedName: '', // 选中的名称
      autocompleteValue: '', // 可搜索输入框中的值
      routeArr: [], // 工艺设置下拉所有值
      addDisabled: true, // 添加按钮是否可点击
      editDisabled: true, // 修改按钮是否可点击
      mouseFocusPosition: 0, // 鼠标聚焦的位置
      operation: '',
      dialogFormRules: {
        OrgType: [
          { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] }
        ],
        OrgCode: [
        code: [
          { required: true, validator: validateName, trigger: ['blur', 'change'] }
        ],
        OrgName: [
        name: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ],
        SupUnit: [
          { required: true, validator: validateTypeCode, trigger: ['blur', 'change'] }
        enable: [
          { required: true, message: '请选择使用状态', trigger: ['blur', 'change'] }
        ]
        // Data: [
        //   { required: true, message: '请设置工艺', trigger: ['blur', 'change'] }
        // ]
      }

    }
@@ -305,67 +344,108 @@
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.restaurants = this.loadAll()
  },
  methods: {
    // 远程搜索
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      const routeArr = this.routeArr
      routeArr.forEach(item => {
        item.value = item.stepname
      })
      const results = queryString ? routeArr.filter(this.createFilter(queryString)) : routeArr
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 过滤
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      return (res) => {
        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    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号' }
      ]
    // 工艺设置 下拉获取所有
    async  getStepSelectArr() {
      const { data: res } = await StepSelect()
      this.routeArr = res
    },
    // 处理下拉选择
    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
      //   }
      // })
      console.log(this.value)
      this.addDisabled = false
      this.flagSelect = ''
      this.value = ''
      this.flag = !this.flag
    },
    tagEdit(tag) {
      console.log(tag, 2)

      this.addDisabled = true
      this.flagSelected = tag.label
      this.value = tag.label
      this.flag = !this.flag
      this.autocompleteValue = item.value
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + tag.id][0].focus()
        this.$refs['saveTagInput' + this.mouseFocusPosition][0].focus()
      })
    },
    // 输入框确认事件
    handleInputConfirm(tag) {
      console.log(tag, 111)
      console.log(this.autocompleteValue, 2)
      // 1.选择内容不能为空
      if (this.autocompleteValue.trim().length < 1) {
        return this.$message.info('选择内容不能为空！')
      }
      // 2.输入框内容与下拉选项内容不匹配
      let flag = false
      this.routeArr.forEach(item => {
        if (item.stepname === this.autocompleteValue) {
          flag = true
        }
      })
      if (!flag) {
        return this.$message.info('输入框内容与下拉选项内容不匹配！')
      }

      // 3.输入框内容与已选内容相同时不能保存
      let flag2 = false
      this.dynamicTags.forEach(item => {
        if (item.stepname === this.autocompleteValue.trim()) {
          flag2 = true
        }
      })
      if (tag.stepname === this.autocompleteValue.trim()) {
        flag2 = false
      }
      if (flag2) {
        return this.$message.info('此工序已选，请选择其它工序！')
      }

      // 将值替换到原tag位置上
      this.dynamicTags.forEach((item, index) => {
        if ((index + 1) === tag.seq) {
          console.log(tag)
          item.stepname = this.autocompleteValue
        }
        item.editDisabled = true
      })
      console.log(this.dynamicTags, 234)
      this.addDisabled = false
      this.editDisabled = true
      this.selectedName = ''
    },
    // tag点击修改按钮
    tagEdit(tag) {
      console.log(tag, 2)
      this.autocompleteValue = ''
      this.dynamicTags.forEach(item => {
        item.stepname = item.stepname.trim()
        if (item.seq !== tag.seq) {
          item.editDisabled = false
          // return this.$message.info('请先填写或选择工艺！')
        }
      })
      this.addDisabled = true
      this.selectedName = tag.stepname
      this.autocompleteValue = tag.stepname
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + tag.seq][0].focus()
      })
      this.mouseFocusPosition = tag.seq
    },
    // tag点击事件
    elTagClick(tag) {
      console.log(tag, 1)

      this.tagSelectedId = tag.id
      this.clickSelected = tag.seq
      if (tag.effect === 'dark') {
        tag.effect = 'light'
        this.tagSelectedId = ''
        this.clickSelected = ''
      } else {
        this.dynamicTags.forEach(item => {
          item.effect = 'light'
@@ -376,45 +456,69 @@
          tag.effect = 'light'
        }
      }

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

    tagClass() {
      // this.tagSelect.style({ backgroundColor: 'red' })
      // return { backgroundColor: 'red' }
    },
    // 处理tag关闭事件
    handleTagClose(tag) {
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      console.log(tag)

      // 当选中的步骤被删除时
      if (tag.seq === this.clickSelected) {
        this.clickSelected = ''
      }
      this.dynamicTags.forEach((item, index) => {
        if (item.label === tag) {
          console.log(item.label === tag)
        if (item.seq === tag.seq) {
          this.dynamicTags.splice(index, 1)
        }
      })
      // 重新排序
      this.dynamicTags.forEach((item, index) => {
        item.editDisabled = true
        item.seq = index + 1
        item.stepcode = 'Step' + ((index + 1).toString().length === 2 ? (index + 1) : '0' + (index + 1))
      })
      if (this.clickSelected === '') {
        this.selectedName = ''
      }
      this.addDisabled = false
    },

    // tag添加按钮
    showInput() {
      // this.inputVisible = true
      this.autocompleteValue = ''
      this.addDisabled = true
      if (this.tagSelectedId === '' || this.tagSelectedId === this.dynamicTags.length) {
      this.editDisabled = false
      let seq = 0
      // 1.第一种情况   当未选中情况下或者选中最后一个的情况下
      if (this.clickSelected === '' || this.clickSelected === this.dynamicTags.length) {
        seq = this.dynamicTags.length + 1
        this.dynamicTags.push(
          { id: (this.dynamicTags.length + 1), label: '', effeft: 'light' }
          { editDisabled: true, seq: seq, stepname: '', effect: 'light', stepcode: ('Step' + (seq.toString().length === 2 ? seq : '0' + seq)) }
        )
      } else {
        console.log(this.tagSelectedId, 31)
        this.dynamicTags.splice(this.tagSelectedId, 0, { id: this.dynamicTags.length + 1, label: '', effect: 'light' })
        // 2.第二种情况   当选中某个tag   将在tag后面添加
        seq = this.clickSelected + 1
        this.dynamicTags.splice(this.clickSelected, 0, { editDisabled: true, seq: seq, stepname: '', effect: 'light' })
        this.dynamicTags.forEach((item, index) => {
          item.seq = index + 1
          item.stepcode = 'Step' + ((index + 1).toString().length === 2 ? (index + 1) : '0' + (index + 1))
        })
      }
      this.flag = !this.flag

      this.$nextTick(_ => {
        this.$refs['saveTagInput' + this.dynamicTags.length][0].focus()
        this.$refs['saveTagInput' + seq][0].focus()
      })
      // this.$nextTick(_ => {
      //   console.log(this.$refs['saveTagInput'], 321)
      //   this.$refs.saveTagInput.$refs.input.focus()
      // })

      this.mouseFocusPosition = seq

      this.dynamicTags.forEach((item, index) => {
        item.editDisabled = seq === index + 1
      })

      console.log(this.dynamicTags, 1)
    },

    // 获取工艺路线列表清单
    async getRouteSearch() {
      const res = await RouteSearch(this.form)
      this.tableData = res.data
@@ -453,26 +557,37 @@
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.getStepSelectArr()
    },
    // 修改按钮
    edit(operation, row) {
    // 工艺路线预览
    async  edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      const { data: res } = await ViewRoute({ routecode: row.code })

      this.dynamicTags = []
      this.$nextTick(() => {
        this.dialogForm.OrgCode = row.org_code
        this.dialogForm.OrgName = row.org_name
        this.dialogForm.SupUnit = row.parent_id
        this.dialogForm.code = res[0].code
        this.dialogForm.name = res[0].name
        this.dialogForm.enable = res[0].enable
        this.dialogForm.description = res[0].description
        // this.dialogForm.Data = row.description
        res[0].Data.forEach(item => {
          this.dynamicTags.push(
            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: 'light' }
          )
        })
      })
    },
    // 删除按钮
    async del(id) {
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteOrganization({ orgid: id }).then(res => {
        DeleteRoute({ routecode: row.code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            this.getRouteSearch()
@@ -484,10 +599,15 @@
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.OrgType = ''
      this.dialogForm.OrgCode = ''
      this.dialogForm.OrgName = ''
      this.dialogForm.SupUnit = ''
      this.dialogForm.code = ''
      this.dialogForm.name = ''
      this.dialogForm.enable = 'Y'
      this.dialogForm.description = ''
      this.dialogForm.Data = []
      this.dynamicTags = [
        { editDisabled: true, stepcode: 'Step01', seq: 1, stepname: ' ', effect: 'light' }
      ]
      this.addDisabled = true
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
@@ -496,25 +616,40 @@
    },
    // 对话框确认
    dialogVisibleConfirm() {
      if (this.dynamicTags[0].stepname.trim() === '') {
        return this.$message.info('工艺设置第一项不能为空！')
      }
      console.log(this.dynamicTags, 3)
      const Data = []
      this.dynamicTags.forEach(item => {
        Data.push({ seq: item.seq, stepcode: item.stepcode, stepname: item.stepname })
      })

      Data.forEach(item => {
        if (item.stepname === this.routeArr.find(it => it.stepname === item.stepname).stepname) {
          item.stepcode = this.routeArr.find(it => it.stepname === item.stepname).stepcode
        }
      })
      console.log(Data, 32)
      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')
            code: this.dialogForm.code,
            name: this.dialogForm.name,
            enable: this.dialogForm.enable,
            description: this.dialogForm.description,
            Data: Data
          }
          // 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' ? '添加失败！' : '修改失败！')
          //   }
          // })
          console.log(data, 2)
          AddUpdateRoute(this.dialogForm.id, this.operation === 'add' ? 'Add' : 'Update', 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' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
@@ -522,7 +657,11 @@
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
        this.tableHeight = this.mainHeight - 50
        if (window.innerHeight < 769) {
          this.tableHeight = this.tableHeight - 50
        }
        this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
      })
    }
  }
@@ -573,8 +712,11 @@
  color: #606266;
}

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

::v-deep .el-radio__input.is-checked .el-radio__inner {
@@ -692,9 +834,21 @@
实现工艺设置动态添加样式
*/

.orderNumber{

.orderNumber {
  margin-bottom: 31px;
  position: absolute;
  margin-left: -7px;
  z-index: 2;
  width: 16px;
  height: 16px !important;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
  color: #FFFFFF;
  background-color: #409EFF;
  border-radius: 50%;
}

.el-icon-edit {
  width: 16px;
  height: 16px;
@@ -702,12 +856,31 @@
  padding: 3px 0 0 3px;
  margin-left: 5px;
  cursor: pointer;
  position: absolute;
  right: 3px;
  bottom: 8px;
}

.el-icon-edit:hover {
  background-color: #99a9bf;
  color: #FFFFFF;
}

.el-icon-close {
  position: absolute;
  top: -8px;
  z-index: 2;
  left: 141px;
  cursor: pointer;
  color: #FFFFFF;
  border-radius: 50%;
  background-color: #ff7474;
  padding: 1px 0 0 1px;
}

//.el-icon-close:hover {
//  background-color: #99a9bf;
//}

.el-tag--dark {
  background-color: $main_color;
@@ -723,23 +896,21 @@
  color: $main_color;
}

::v-deep .el-tag__close {
  padding: 1px 0 0 1px !important;
}
::v-deep .el-tag__close:hover {
  background-color: #99a9bf;
}

::v-deep .el-button--success {
  width: 40px !important;
  background-color: #ecf5ff;
  border-radius: 0;
  color: $main_color;
}
::v-deep .el-button--success:disabled {
  background-color:#eeeeee;
  color: $main_color;
}

::v-deep .el-tag {
  //height: 30px;
  border-radius: 0;
  border: 1px solid $main_color;
}

::v-deep .el-input--small .el-input__inner {
@@ -749,15 +920,26 @@
.settingDiv {
  display: flex;
  width: 100%;
  height: 40px;
  overflow-y: scroll;
  padding-left: 7px;
  height: 56px;
  overflow-x: scroll;
  overflow-y: hidden;
  align-items: center;
  background: aliceblue;
}

.elTag {
  margin-left: 0;
  width: 100px;
  width: 150px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocompleteClass{
  .el-autocomplete-suggestion li{
    //color: red;
  }
}
</style>