解决打包问题导致树组件以及弹窗组件内容无法正常显示问题，解决方式为将弹窗或相关底部按钮区域样式drawer-bootom-button修改为drawe...

zhuzhuanzhuan

2023-12-15 4f8096a6a14fb145fe15de3be1f34da095973ef8

 src/views/mdc/base/modules/EquipmentList/UserModal.vue

@@ -1,12 +1,11 @@
<template>
  <a-drawer
  <a-modal
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    @cancel="visible=false"
    :visible="visible"
    :footer="null"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <template slot="title">
@@ -23,10 +22,10 @@
      <a-form-model ref="form" :form="form" :model="model" :rules="validatorRules">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="设备编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId">
            <a-form-model-item label="统一编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId">
              <a-input-search :readOnly="true"
                              v-model="model.equipmentId"
                              :disabled="disSeach"   @search="deviceSearch" enter-button placeholder='请选择设备编码'/>
                              :disabled="disSeach"   @search="deviceSearch" enter-button placeholder='请选择统一编码' />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
@@ -39,23 +38,35 @@

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
            <a-form-model-item  v-if="isDepartType == 0" label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!departDisabled">
              <j-select-equipment-depart :disabled="disableSubmit" v-model="model.selectedDeparts" :multi="false" @back="backDepartInfo" :backDepart="true" :treeOpera="true"></j-select-equipment-depart>
            </a-form-model-item>

            <a-form-model-item v-if="isDepartType == -1" label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="请选择设备类型"
                        :triggerChange="true"
                        v-model="model.equipmentType">
                <a-select-option v-for='item in selectList' :key='item.id' :value='item.equipmentTypeName'>
                  {{item.equipmentTypeName}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="车间分配" :labelCol="labelCol" :wrapperCol="wrapperCol"  v-show="!productionDisabled" ref="selectedProduction"  prop="selectedProduction">
              <!--<j-select-equipment-production  v-decorator="['selectedProduction',{rules:[{required:true,message:'请选择车间!'}]}]" :multi="false" @back="backProductionInfo" :backProduction="true" :treeProductOpera="true"></j-select-equipment-production>-->



              <j-select-equipment-production :disabled="disableSubmit"  v-model="model.selectedProduction" :multi="false" @back="backProductionInfo" :backProduction="true" :treeProductOpera="true"></j-select-equipment-production>
            </a-form-model-item>

          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-form-model-item v-if="isDepartType == -1" label="系统版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="请输入系统版本号"
                       v-model="model.systemVersion"/>
            </a-form-model-item>
            <a-form-model-item v-if="isDepartType == 0" label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-select :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="请选择设备类型"
              :triggerChange="true"
                      v-model="model.equipmentType">
@@ -113,7 +124,7 @@
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item label="系统版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-form-model-item v-if="isDepartType == 0" label="系统版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="请输入系统版本号"
                       v-model="model.systemVersion"/>
            </a-form-model-item>
@@ -132,14 +143,14 @@
    </a-spin>


    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
    <div class="drawer-bottom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃操作？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
    <device-list-model ref="deviceListModel" @sendSelectionRows="getDeviceRows"></device-list-model>
  </a-drawer>
  </a-modal>

</template>

@@ -157,6 +168,7 @@
  import DeviceListModel from './DeviceListModal'
  import JSelectEquipmentDepart from '../../../../../components/jeecgbiz/JSelectEquipmentDepart'
  import AFormModelItem from 'ant-design-vue/es/form-model/FormItem'
  import {mapActions} from 'vuex'
  export default {
    name: "UserModal",
    components: {
@@ -187,7 +199,7 @@
          equipmentId:
            [
              {
              required: true, message: '请选择设备编号!',
              required: true, message: '请选择设备编号!'
              },
              // {
              // validator: this.validatequipmentId
@@ -240,13 +252,15 @@
        rolesOptions:[],
        nextDepartOptions:[],
        nextProductionOptions:[],
        selectList:[]
        selectList:[],
        isDepartType:''
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
      this.queryGroup()
      this.queryTreeData()
      // this.initRoleList()
      // this.initTenantList()
    },
@@ -256,6 +270,21 @@
      }
    },
    methods: {
      ...mapActions(['QueryDepartTree']),
      queryTreeData() {
        this.QueryDepartTree().then(res => {
          if (res.success) {
            this.isDepartType = res.result[0].value
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() =>{
        })
      },
      queryGroup() {
        getAction(this.url.queryEquipmentType).then(res => {
          if (res.success) {
@@ -316,6 +345,7 @@
        that.visible = true;
        //根据屏幕宽度自适应抽屉宽度
        this.resetScreenSize();

        // that.userId = record.id;
        // console.log(record)
        that.model = Object.assign({}, record);
@@ -418,8 +448,6 @@
        })
      },



      refresh () {
        this.userId=""
        this.nextDepartOptions=[];
@@ -458,7 +486,7 @@
            obj.then((res)=>{
              if(res.success){
                // that.$message.success(res.message);
                that.$notification.warning({
                that.$notification.success({
                  message:'消息',
                  description:res.message
                });
@@ -518,11 +546,6 @@
      //     }
      //   })
      // },
      handleCancel () {
        this.close()
      },



      // validatequipmentId(rule, value, callback){
      //   if(!value){
@@ -556,8 +579,15 @@
        }else{
          this.departIdShow=true;
        }
      },
      /**
       * 编辑或查看详情数据时清除抽屉表单验证
       */
      removeValidate(){
        this.$refs.form.clearValidate()
      }
    }
    },

  }
</script>

@@ -581,7 +611,7 @@
    padding-bottom:10px;
  }

  .drawer-bootom-button {
  .drawer-bottom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;