1.项目整体样式的配置2.实现工艺设置动态添加的静态样式

loulijun2021

2022-06-25 e846eefa54a7a2274a34d43d4601e192a1ada3d9

1.项目整体样式的配置2.实现工艺设置动态添加的静态样式

 src/components/Pagination/index.vue

@@ -8,6 +8,7 @@
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      popper-class="select_bottom"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
@@ -98,4 +99,33 @@
.pagination-container.hidden {
  display: none;
}

::v-deep .el-pagination__sizes .el-input .el-input__inner:hover{
 border-color: #42b983 ;
}
::v-deep .el-pagination__sizes .el-input .el-input__inner:focus{
  border-color: #42b983;
}

</style>
<style lang="scss">
.select_bottom{
  //z-index: 2008; position: absolute; left: 147px !important; top: 355px !important; margin: 0px;
  //border: 1px solid #55aaff;
  //.el-select-dropdown {
  //
  //}
  //.el-select-dropdown {
  //  background-color: #ffffff;
  //}
  .el-select-dropdown__item.selected {
    color: #42b983;
  }

  //.el-select-dropdown__item.hover,
  //.el-select-dropdown__item:hover {
  //  background: red;
  //  color: #fff;
  //}
}
</style>

 src/layout/components/Navbar.vue

@@ -92,7 +92,7 @@
        removeCookie('usertype')
        removeCookie('userid')
        this.$message.success('退出成功！')
        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        this.$router.push('/login')
        // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      }
      // this.$router.push(`/login`)

 src/layout/components/Sidebar/index.vue

@@ -58,6 +58,7 @@
      'sidebar'
    ]),
    routes() {
      // 接口中的返回值 进行格式化
      const newCodeArr = []
      const newCodeNameArr = []
      this.routers.forEach(item => {
@@ -74,6 +75,8 @@
          }
        }
      })

      // 本地路由与 接口中的返回值进行匹配，有相同code的值进行push
      const arr = this.$router.options.routes
      const arr2 = []
      arr.forEach((item, index) => {
@@ -100,6 +103,7 @@
          arr2.push(item)
        }
      })

      return arr2
      // return arr
    },

 src/permission.js

@@ -52,7 +52,12 @@
          // if (s) {
          //   console.log(s)
          // }

          // const s = store.getters.addRouters
          // router.addRoutes(s)
          //
          // if (s) {
          //   console.log(s, 11111)
          // }
          next()
          // next({ ...to, replace: true })
        } catch (error) {

 src/views/jcsz/jsqd.vue

@@ -17,7 +17,7 @@
              <el-input v-model="form.RoleName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="角色类型" style=" display: flex;">
              <el-select v-model="form.RoleTypeCode" filterable style="width: 200px" placeholder="请选择">
              <el-select v-model="form.RoleTypeCode" :popper-append-to-body="false" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in RoleTypeCodeArr2"
                  :key="item.roletype_code"
@@ -162,6 +162,7 @@
          <el-select
            v-model="dialogForm.RoleTypeCode"
            filterable
            :popper-append-to-body="false"
            style="width: 220px"
            placeholder="请选择"
          >
@@ -274,7 +275,7 @@
    <el-dialog
      title="角色关联用户"
      :visible.sync="userDialogVisible"
      width="90%"
      width="80%"
      top="15vh"
      class="userDialogVisible"
      @closed="handleCloseUser"
@@ -300,6 +301,7 @@
              ref="dialogCascaderUser"
              key="cascaderKey"
              filterable
              :append-to-body="false"
              :options="StuOrgArr"
              :props="defaultProps"
              class="userDialogVisibleInput"
@@ -312,6 +314,7 @@
            <el-select
              v-model="dialogFormUser.isrole"
              filterable
              :popper-append-to-body="false"
              style="width: 220px"
              placeholder="请选择"
              class="userDialogVisibleInput"
@@ -1278,8 +1281,12 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
}
::v-deep .el-button--primary:hover {
  border: none;
}

::v-deep .el-button--info{
@@ -1414,6 +1421,9 @@
  height: 30px;
  line-height: 30px;
}
::v-deep .el-input__inner:focus {
  border-color: $main_color;
}

::v-deep .el-table .caret-wrapper {
  //float: right;
@@ -1481,4 +1491,20 @@
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}
::v-deep .el-input__inner:focus {
  border-color: $main_color;
}

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

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

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

</style>

 src/views/jcsz/wldw.vue

@@ -17,7 +17,7 @@
              <el-input v-model="form.CuntUnitName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="单位属性" style=" display: flex;">
              <el-select v-model="form.UnitAttr" filterable style="width: 200px" placeholder="请选择">
              <el-select v-model="form.UnitAttr":popper-append-to-body="false" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in UnitAttrArr"
                  :key="item.value"
@@ -460,16 +460,22 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
}

::v-deep .el-button--primary:hover {
  border: none;
}
::v-deep .el-button--info {
  //background-color: $main_color !important;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
::v-deep .el-input__inner:focus {
  border-color: $main_color;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
@@ -590,4 +596,23 @@
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}

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

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

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

</style>

 src/views/jcsz/yhqd.vue

@@ -20,14 +20,16 @@
              <el-cascader
                ref="cascader"
                filterable
                popper-class="elCascader"
                :options="StuOrgArr"
                :props="defaultProps"
                @change="cascaderChange"
              />
            </el-form-item>
            <el-form-item label="工资类型" style=" display: flex;">
              <el-select v-model="form.wagetype" filterable style="width: 200px" placeholder="请选择">
              <el-select v-model="form.wagetype" :popper-append-to-body="false" filterable style="width: 200px" placeholder="请选择">
                <el-option

                  v-for="item in wagetypeArr"
                  :key="item.value"
                  :label="item.label"
@@ -36,7 +38,7 @@
              </el-select>
            </el-form-item>
            <el-form-item label="在职状态" style=" display: flex;">
              <el-select v-model="form.Enable" filterable style="width: 200px" placeholder="请选择">
              <el-select v-model="form.Enable" :popper-append-to-body="false" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in EnableArr"
                  :key="item.value"
@@ -196,6 +198,7 @@
        <el-form-item label="在职状态" prop="Enable">
          <el-select
            v-model="dialogForm.Enable"
            :popper-append-to-body="false"
            filterable
            style="width: 220px"
            placeholder="请选择"
@@ -208,34 +211,35 @@
            />
          </el-select>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="所属组织" prop="StuOrg" style="display: flex">
            <el-cascader
              ref="dialogCascader"
              key="cascaderKey"
              filterable
              :options="StuOrgArr"
              :props="defaultProps"
              style="width: 220px;"
              @change="dialogCascaderChange"
        <el-form-item label="所属组织" prop="StuOrg" style="display: flex;float: left">
          <el-cascader
            ref="dialogCascader"
            key="cascaderKey"
            filterable
            popper-class="elCascader"
            :options="StuOrgArr"
            :props="defaultProps"
            style="width: 220px;"
            @change="dialogCascaderChange"
          />
        </el-form-item>
        <el-form-item label="工资类型" prop="wagetype">
          <el-select
            v-model="dialogForm.wagetype"
            :popper-append-to-body="false"
            filterable
            style="width: 220px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in wagetypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-form-item>
          <el-form-item label="工资类型" prop="wagetype">
            <el-select
              v-model="dialogForm.wagetype"
              filterable
              style="width: 220px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in wagetypeArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
          </el-select>
        </el-form-item>

        <el-form-item label="联系方式">
          <el-input v-model="dialogForm.Mobile" style="width: 220px" />
        </el-form-item>
@@ -390,8 +394,8 @@
        wagetype: ''
      },
      wagetypeArr: [
        { value: '1', label: '计件制' },
        { value: '2', label: '计时制' }
        { value: '2', label: '计件制' },
        { value: '1', label: '计时制' }
      ],
      operation: '',
      dialogFormRules: {
@@ -878,11 +882,15 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
}
::v-deep .el-button--primary:hover {
  border: none;
}

::v-deep .el-button--info{
::v-deep .el-button--info {
  //background-color: $main_color !important;
  height: 30px;
  display: flex;
@@ -936,7 +944,7 @@

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

::v-deep .el-table .caret-wrapper {
@@ -1051,12 +1059,55 @@
  }
}

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

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

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

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

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

::v-deep  .el-input__inner:focus {
  border-color: #42b983 !important;
}

//::v-deep   .el-cascader:not(.is-disabled):hover .el-input__inner:focus {
//  border-color: #42b983 !important;
//}
</style>
<style lang="scss">
.elCascader {
  //.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
  //  color: #42b983 ;
  //}
  .el-cascader-node.is-selectable.in-checked-path {
    color: #42b983;
  }

  .el-radio__input.is-checked .el-radio__inner {
    background-color: #42b983;
    border-color: #42b983;
  }
  .el-radio__input.is-checked .el-radio__inner:hover {
    border-color: #42b983;
  }
  .el-input__inner{
    border-color: #42b983 !important;
  }

}
</style>

 src/views/jcsz/zzjg.vue

@@ -17,7 +17,7 @@
              <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" filterable style="width: 200px" placeholder="请选择">
              <el-select v-model="form.OrgType" :popper-append-to-body="false" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in OrgTypeArr"
                  :key="item.value"
@@ -139,7 +139,6 @@
        <el-form-item label="组织类型" prop="OrgType">
          <el-radio-group
            v-model="dialogForm.OrgType"

            @change="changeRadio"
          >
            <el-radio
@@ -161,6 +160,7 @@
            v-model="dialogForm.SupUnit"
            style="width: 220px"
            filterable
            :popper-append-to-body="false"
            placeholder="请选择"
          >
            <el-option
@@ -416,8 +416,12 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
}
::v-deep .el-button--primary:hover {
  border: none;
}

::v-deep .el-button--info{
@@ -507,4 +511,16 @@
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}

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

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

::v-deep .el-select-dropdown__item.selected{
color: $main_color;
}
</style>

 src/views/login/index.vue

@@ -131,15 +131,20 @@
      // } else {
      //   callback()
      // }
      const mPattern = /^\w+$/ // 正则 等价于[A-Za-z0-9_]
      // const mPattern = /^\w+$/ // 正则 等价于[A-Za-z0-9_]

      if (value.length < 1) {
        callback(new Error('账号不能为空！'))
      } else if (!mPattern.test(value)) {
        callback(new Error('账号不符合规则，可输入字母、数字及下划线'))
      } else {
        callback()
      }
      // if (value.length < 1) {
      //   callback(new Error('账号不能为空！'))
      // } else if (!mPattern.test(value)) {
      //   callback(new Error('账号不符合规则，可输入字母、数字及下划线'))
      // } else {
      //   callback()
      // }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 1) {
@@ -150,8 +155,8 @@
    }
    return {
      loginForm: {
        username: 'Admin',
        password: '123456'
        username: '张三', // Admin
        password: '123456'// 123456
      },
      loginRules: {
        username: [{ required: true, trigger: ['blur', 'change'], validator: validateUsername }],

 src/views/sbgl/sbqd.vue

@@ -17,7 +17,7 @@
              <el-input v-model="form.DeviceName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="使用状态" style=" display: flex;">
              <el-select v-model="form.Status" filterable style="width: 200px" placeholder="请选择">
              <el-select v-model="form.Status" :popper-append-to-body="false" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in StatusArr"
                  :key="item.value"
@@ -27,7 +27,7 @@
              </el-select>
            </el-form-item>
            <el-form-item label="所属车间" style=" display: flex;">
              <el-select v-model="form.WorkShop" filterable style="width: 200px" placeholder="请选择">
              <el-select v-model="form.WorkShop" :popper-append-to-body="false" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in WorkShopArr"
                  :key="item.code"
@@ -37,7 +37,7 @@
              </el-select>
            </el-form-item>
            <el-form-item filterable label="设备类型" style="display: flex;">
              <el-select v-model="form.DeviceType" style="width: 200px" placeholder="请选择" @change="deviceTypeChange">
              <el-select v-model="form.DeviceType" :popper-append-to-body="false" style="width: 200px" placeholder="请选择" @change="deviceTypeChange">
                <el-option
                  v-for="item in DeviceTypeArr"
                  :key="item.code"
@@ -49,6 +49,7 @@
            <el-form-item label="设备组" style=" display: flex;">
              <el-select
                v-model="form.DeviceGroup"
                :popper-append-to-body="false"
                :disabled="form.DeviceType===''"
                style="width: 200px"
                placeholder="请选择"
@@ -211,7 +212,7 @@
          <el-input v-model="dialogForm.devicename" style="width: 220px" />
        </el-form-item>
        <el-form-item label="设备类型" prop="devicetypecode">
          <el-select v-model="dialogForm.devicetypecode" style="width: 220px" placeholder="请选择" @change="devicetypecodeChange">
          <el-select v-model="dialogForm.devicetypecode" :popper-append-to-body="false" style="width: 220px" placeholder="请选择" @change="devicetypecodeChange">
            <el-option
              v-for="item in DeviceTypeArr"
              :key="item.code"
@@ -221,7 +222,7 @@
          </el-select>
        </el-form-item>
        <el-form-item label="设备组" prop="devicegroupcode">
          <el-select v-model="dialogForm.devicegroupcode" :disabled="dialogForm.devicetypecode===''" style="width: 220px" placeholder="请选择">
          <el-select v-model="dialogForm.devicegroupcode" :popper-append-to-body="false" :disabled="dialogForm.devicetypecode===''" style="width: 220px" placeholder="请选择">
            <el-option
              v-for="item in DeviceGroupArr"
              :key="item.code"
@@ -236,10 +237,11 @@
            style="width: 220px"
            type="date"
            placeholder="选择日期"
            popper-class="dateStyle"
          />
        </el-form-item>
        <el-form-item label="所属车间" prop="workshopcode">
          <el-select v-model="dialogForm.workshopcode" style="width: 220px" placeholder="请选择" @change="workshopcodeChange">
          <el-select v-model="dialogForm.workshopcode" :popper-append-to-body="false" style="width: 220px" placeholder="请选择" @change="workshopcodeChange">
            <el-option
              v-for="item in WorkShopArr"
              :key="item.code"
@@ -249,7 +251,7 @@
          </el-select>
        </el-form-item>
        <el-form-item label="所属产线" prop="linecode">
          <el-select v-model="dialogForm.linecode" :disabled="dialogForm.workshopcode===''" style="width: 220px" placeholder="请选择">
          <el-select v-model="dialogForm.linecode" :popper-append-to-body="false" :disabled="dialogForm.workshopcode===''" style="width: 220px" placeholder="请选择">
            <el-option
              v-for="item in WorkLineArr"
              :key="item.linecode"
@@ -259,7 +261,7 @@
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态" prop="status">
          <el-select v-model="dialogForm.status" style="width: 220px" placeholder="请选择">
          <el-select v-model="dialogForm.status" :popper-append-to-body="false" style="width: 220px" placeholder="请选择">
            <el-option
              v-for="item in StatusArr"
              :key="item.value"
@@ -419,7 +421,7 @@
          sortable="custom"
        >
          <template slot-scope="{row}">
            <el-select v-if="row.isVisible===1" v-model="row.eqptype_code" placeholder="请选择">
            <el-select v-if="row.isVisible===1" v-model="row.eqptype_code" :popper-append-to-body="false" placeholder="请选择">
              <el-option
                v-for="item in DeviceTypeArr"
                :key="item.code"
@@ -972,10 +974,13 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
}

::v-deep .el-button--primary:hover {
  border: none;
}
::v-deep .el-button--info {
  //background-color: $main_color !important;
  height: 30px;
@@ -1112,4 +1117,22 @@
.body ::v-deep .el-form-item{
  margin-bottom: 0;
}
::v-deep .el-input__inner:focus {
  border-color: $main_color;
}

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

::v-deep .el-select-dropdown__item.selected{
  color: $main_color;
}
</style>
<style lang="scss">
.dateStyle{
  .el-date-table td.today span{
    color: #42b983;
  }
}
</style>

 src/views/template.vue

@@ -17,7 +17,7 @@
              <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: 200px" placeholder="请选择">
              <el-select v-model="form.OrgType" :popper-append-to-body="false" style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in OrgTypeArr"
                  :key="item.value"
@@ -146,6 +146,7 @@
            v-model="dialogForm.SupUnit"
            style="width: 220px"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in SupUnitArr"
@@ -372,10 +373,13 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
}

::v-deep .el-button--primary:hover {
  border: none;
}
::v-deep .el-button--info {
  height: 30px;
  display: flex;
@@ -430,6 +434,9 @@
::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}
::v-deep .el-input__inner:focus {
  border-color: $main_color;
}

::v-deep .el-table .caret-wrapper {
@@ -500,4 +507,22 @@
  margin-bottom: 0;
}

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

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

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

</style>

 src/views/wlgl/ckdy.vue

@@ -333,8 +333,12 @@
  height: 30px;
  display: flex;
  align-items: center;
  border: 1px solid $main_color;
  //border: 1px solid $main_color;
  border: none;
  padding: 0 20px;
}
::v-deep .el-button--primary:hover {
  border: none;
}

::v-deep .el-button--info {
@@ -461,4 +465,11 @@
  margin-bottom: 0;
}

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

</style>

 src/views/zzmx/gylx.vue

@@ -136,11 +136,12 @@
          <el-form-item prop="SupUnit" label="使用状态" style="margin-right: 20px">
            <el-select
              v-model="dialogForm.isEnable"
              :popper-append-to-body="false"
              style="width: 220px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in SupUnitArr"
                v-for="item in isEnableArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
@@ -152,43 +153,51 @@
          </el-form-item>
        </div>
        <el-form-item label="工艺设置" prop="OrgName">
          <div style="display: flex;width:100%;overflow-y: scroll">
          <div class="settingDiv">
            <!--   实现工艺设置动态添加-->
            <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)"
              >
                {{ tag.label }}
                <i class="el-icon-edit" @click="tagEdit(tag)" />
              </el-tag>
            <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">

              <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>
                <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-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: 0;width: 200px;transform: translate(1)"
                  autofocus
                  @select="handleSelect"
                  @keyup.enter.native="handleInputConfirm2"
                />
                <!--        @blur="handleBlur2"-->
                <div v-if="index!==dynamicTags.length-1" style="width: 40px;height: 1px;border: 1px solid #42b983" />
              </div>
            </div>
            <!--            :disabled="addDisabled"-->
            <el-button type="primary" style="margin-left: 20px;width: 100px;height: 32px;" size="small" @click="showInput">+
              添加
            </el-button>
            <el-button
              type="success"
              class="tagSuccess"
              size="small"
              icon="el-icon-plus"
              @click="showInput"
            />

          </div>
        </el-form-item>
@@ -247,7 +256,7 @@
        page: 1, // 第几页
        rows: 10 // 每页多少条
      },
      isEnable: [
      isEnableArr: [
        { label: '是', value: 'Y' },
        { label: '否', value: 'N' }
      ],
@@ -340,8 +349,10 @@
      this.flag = !this.flag
    },
    tagEdit(tag) {
      console.log(tag, 2)

      this.addDisabled = true
      this.flagSelect = tag.label
      this.flagSelected = tag.label
      this.value = tag.label
      this.flag = !this.flag
      this.$nextTick(_ => {
@@ -349,7 +360,7 @@
      })
    },
    elTagClick(tag) {
      console.log(tag)
      console.log(tag, 1)

      this.tagSelectedId = tag.id
      if (tag.effect === 'dark') {
@@ -397,7 +408,7 @@
      }
      this.flag = !this.flag
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + this.dynamicTags.length ][0].focus()
        this.$refs['saveTagInput' + this.dynamicTags.length][0].focus()
      })
      // this.$nextTick(_ => {
      //   console.log(this.$refs['saveTagInput'], 321)
@@ -585,6 +596,10 @@
  line-height: 30px;
}

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

::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}
@@ -653,4 +668,96 @@
  margin-bottom: 0;
}

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

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

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

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

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

/*
实现工艺设置动态添加样式
*/

.orderNumber{

}
.el-icon-edit {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 3px 0 0 3px;
  margin-left: 5px;
  cursor: pointer;
}

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

.el-tag--dark {
  background-color: $main_color;
  border-color: $main_color;
}

.tagSuccess {
  margin-left: 20px;
  width: 100px;
  height: 32px;
  display: flex;
  justify-content: center;
  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-tag {
  //height: 30px;
  border-radius: 0;
}

::v-deep .el-input--small .el-input__inner {
  border-radius: 0;
}

.settingDiv {
  display: flex;
  width: 100%;
  height: 40px;
  overflow-y: scroll;
  align-items: center;
}

.elTag {
  margin-left: 0;
  width: 100px;
  position: relative;
}

</style>