设备台账弹出框及调整了所有弹出框样式

Goldennfish

2023-07-25 377e00b443a02f1567e84aef14d6134124603813

 src/views/laboratory/ledger/index.vue

@@ -19,15 +19,24 @@
        </el-form>
      </div>
      <div class="serve-btn">
        <el-button type="primary" icon="el-icon-plus">新增人员</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="drawerFormVisible = true">新增人员</el-button>
      </div>
    </div>
    <div class="content-main">
      <div class="library-bom">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <div class="bom-item-search">
          <el-row>
            <el-col :span="19">
              <el-input
                v-model="filterText"
                placeholder="输入关键字进行过滤"
              />
            </el-col>
            <el-col :span="5">
              <el-button type="primary" size="small" @click="FormVisible = true"><i class="el-icon-plus" /></el-button>
            </el-col>
          </el-row>
        </div>
        <el-tree
          ref="tree"
          class="filter-tree"
@@ -57,56 +66,46 @@
        <div class="table-box">
          <el-table
            ref="personnerlTable"

            :max-height="800"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="personnerlTable"
            style="width: 100%"
          >
            <el-table-column
              prop="roleName"
              prop="id"
              label="序号"
              min-width="90"
            />
            <el-table-column
              prop="rolePermissions"
              prop="equipment_code"
              label="仪器设备编号"
              min-width="150"
              min-width="200"
            />
            <el-table-column
              prop="age"
              prop="equipment_name"
              label="仪器设备名称"
              min-width="150"
            />
            <el-table-column
              prop="creatTime"
              label="规格型号"
              min-width="150"
            />
            <el-table-column
              prop="phone"
              label="上次计量时间"
              min-width="200"
            />
            <el-table-column
              prop="mailbox"
              label="上次计量单位"
              prop="specification_models"
              label="型号规格"
              min-width="200"
            />
            <el-table-column
              prop="mailbox"
              label="截止有效期"
              prop="keeper"
              label="保管人"
              min-width="200"
            />
            <el-table-column
              prop="mailbox"
              label="计量周期"
              prop="term_validity"
              label="计量截止有效期"
              min-width="200"
            />
            <el-table-column
              prop="incumbentStatus"
              prop="conditions"
              label="设备状态"
              min-width="120"
              min-width="200"
              :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
              :filter-method="filterTag"
              filter-placement="bottom-end"
@@ -119,16 +118,42 @@
              </template>
            </el-table-column>
            <el-table-column
              prop="storage_place"
              label="存放地"
              min-width="200"
            />
            <el-table-column
              label="操作"
              min-width="120"
              :fixed="true"
              min-width="200"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
                <!-- <el-button type="text" size="small">编辑</el-button> -->
                <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 弹出表单页 -->
          <div>
            <!-- 添加分类 -->
            <el-dialog title="添加分类" :visible.sync="FormVisible" width="33%">
              <el-form :model="treeForm">
                <el-form-item label="分类名称" label-width="100px">
                  <el-input v-model="treeForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="父级分类" label-width="100px">
                  <el-select v-model="treeForm.type" placeholder="请选择">
                    <el-option label="原材料" value="0" />
                    <el-option label="电线电缆" value="1" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="FormVisible = false">取 消</el-button>
                <el-button type="primary">确 定</el-button>
              </div>
            </el-dialog>
          </div>
          <div>
            <el-pagination
              :current-page="currentPage"
@@ -143,6 +168,179 @@
        </div>
      </div>
    </div>
    <!-- 抽屉 -->
    <el-drawer
              title="新增仪器设备"
              :before-close="handleClose"
              :visible.sync="drawerFormVisible"
              direction="rtl"
              custom-class="demo-drawer"
              ref="drawer"
              size="40%"
              >
              <div class="demo-drawer__content">
                <el-form label-position="top" :model="equipmentform">
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="所属分类：" label-width="80">
                        <el-select
                          v-model="equipmentform.classifyId"
                          clearable
                          filterable
                          :allow-create="true"
                          placeholder="请选择"
                          @blur="productSelect"
                          style="width:100%"
                        >
                          <el-option
                            v-for="item in fatherOpetions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="设备编号：" label-width="80">
                        <el-input v-model="equipmentform.equipmentCode" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                      <el-col :span="11">
                      <el-form-item label="仪器设备名称：" label-width="80">
                        <el-input v-model="equipmentform.name" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="状态：" label-width="80">
                        <el-select
                          v-model="equipmentform.classifyId"
                          clearable
                          filterable
                          :allow-create="true"
                          placeholder="请选择仪器设备状态"
                          @blur="productSelect"
                          style="width:100%"
                        >
                          <el-option
                            v-for="item in fatherOpetions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="型号规格：" label-width="80">
                        <el-input v-model="equipmentform.specification_models" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="测量范围：" label-width="80">
                        <el-input v-model="equipmentform.measuringRange" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="不确定度/准确度/最大允许误差：" label-width="80">
                        <el-input v-model="equipmentform.errorRate" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="生产厂家：" label-width="80">
                        <el-input v-model="equipmentform.manufacturer" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="存放地点：" label-width="80">
                        <el-input v-model="equipmentform.storagePlace" autocomplete="off" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="到货日期：" label-width="80">
                        <el-date-picker
                          v-model="equipmentform.arrivalDate"
                          type="date"
                          placeholder="请选择到货日期"
                          style="width:100%">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="验收日期：" label-width="80">
                        <el-date-picker
                          v-model="equipmentform.acceptanceDate"
                          type="date"
                          placeholder="请选择验收日期"
                          style="width:100%">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="保管人：" label-width="80">
                        <el-select
                          v-model="equipmentform.keeper"
                          clearable
                          filterable
                          :allow-create="true"
                          placeholder="请选择保管人"
                          @blur="productSelect"
                          style="width:100%"
                        >
                          <el-option
                            v-for="item in fatherOpetions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                      <el-form-item label="是否支持数采：" label-width="80">
                        <el-radio v-model="equipmentform.whetherDataAcquisition" label="1">是</el-radio>
                        <el-radio v-model="equipmentform.whetherDataAcquisition" label="2">否</el-radio>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item label="仪器设备计量：" label-width="80">
                        <el-radio v-model="equipmentform.equipmentMeasurement" label="1">需要</el-radio>
                        <el-radio v-model="equipmentform.equipmentMeasurement" label="2">不需要</el-radio>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="50">
                    <el-col :span="11">
                    <el-form-item label="描述：" label-width="80">
                      <el-input
                          type="textarea"
                          :rows="2"
                          placeholder="请输入内容"
                          v-model=equipmentform.descriptiveness
                          style="width:217%">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  </el-row>
                </el-form>
                <div class="demo-drawer__footer">
                  <el-button @click="drawerFormVisible = false" class="el-button--default">取 消</el-button>
                  <el-button type="primary" class="el-button--primary el-button--medium">确 定</el-button>
                </div>
              </div>
            </el-drawer>
  </div>
</template>

@@ -166,6 +364,20 @@
          }]
        }]
      }],
      treeForm: [{
        name: '',
        type: ''
      }],
      personnerlTable: [{
        specification_models: 'WCDMS-1', // 型号规格
        equipment_name: '数字电桥', // 仪器设备名称
        term_validity: 12, // 计量截止有效期
        equipment_code: 'JSTC-W1-00001', // 仪器设备编号
        keeper: 0, // 保管人
        id: 1, // 序号
        conditions: 1, // 设备状态
        storage_place: '地球亚洲中国江苏南通' // 存放地
      }],
      // tree默认值
      defaultProps: {
        children: 'children',
@@ -178,7 +390,29 @@
      // 表格搜索单选值
      radioValue: '全部',
      // 表格搜索已过期
      isOut: false
      isOut: false,
      FormVisible: false,
      drawerFormVisible: false,
      loading: false,
      equipmentform: {
        acceptanceDate: '', // 验收日期
        arrivalDate: '', // 到货日期
        classifyId: '', // 所属分类
        conditions: '', // 状态
        descriptiveness: '', // 描述
        equipmentCode: '', // 设备编号
        equipmentMeasurement: '', // 仪器设备计量
        equipmentName: '', // 仪器设备名称
        errorRate: '', // 不确定度/准确度/最大允许误差
        keeper: '', // 保管人
        manufacturer: '', // 生产厂家
        measuringRange: '', // 测量范围
        specificationsModels: '', // 型号规格
        storagePlace: '', // 存放地点
        whetherDataAcquisition: '' // 是否支持数采
      },
      timer: null,
      formLabelWidth: '80'
    }
  },
  watch: {
@@ -191,11 +425,49 @@
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  },
  handleClose(done) {
    if (this.loading) {
      return
    }
    this.$confirm('确定要提交表单吗？')
      .then(_ => {
        this.loading = true
        this.timer = setTimeout(() => {
          done()
          // 动画关闭需要一定的时间
          setTimeout(() => {
            this.loading = false
          }, 400)
        }, 2000)
      })
      .catch(_ => {})
  }
}
</script>

<style lang="scss" scoped>
.demo-drawer__content{
  margin-left: 50px;
  // margin-right: 5px;
}
.demo-drawer__footer {
  display: flex;
  justify-content: space-between;
}

.demo-drawer__footer .el-button--default {
  background-color: #fff;
  color: #333;
  width: 45%;
}

.demo-drawer__footer .el-button--primary {
  background-color: #409EFF;
  color: #fff;
  width: 45%;
  margin-right: 60px;
}
.ledger-main{
  width: 100%;
  height: 100%;
@@ -235,6 +507,43 @@
    .library-bom{
      flex: 2;
      margin-right: 12px;
      .bom-item-search{
        margin-bottom: 12px;
        ::v-deep .el-input{
          input{
            height: 33px;
            line-height: 33px;
          }
        }
        .tips{
          height: 33px !important;
          display: flex;
          height: 24px;
          align-items: center;
          font-size: 16px;
          // margin-bottom: 12px;
          >span{
            display: inline-block;
            margin-right: 10px;
            width: 4px;
            height: 16px;
            background: #0077DB;
           }
           >div{
              height: 100%;
              line-height: 36px;
            }
            .el-button{
              padding: 0;
            }
        }
      }
         .bom-item-search .el-row{
          // display: flex;
          .el-col{
            text-align: right;
           }
          }
      .el-tree {
        margin-top: 12px;
        ::v-deep .el-tree-node__content{