yxk-storeroom-system/src/views/archivesManage/archivesCheck/module/addCheck.vue

<template>
  <div>
    <el-dialog ref="dialogTable" title="新增盘点" :visible.sync="addFormVisible" class="dialog-table">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <el-form
        ref="form"
        :model="checkForm"
        size="small"
        label-width="80px"
      >
        <el-form-item label="选择区域" prop="selectArea" class="down-select">
          <el-select
            v-model="selectAreaValue"
            style="width: 300px"
            multiple
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectArea"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择门类" prop="category" class="down-select">
          <el-select
            v-model="categoryValue"
            style="width: 300px"
            multiple
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in category"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button type="primary" style="margin:0 0 0 10px;height:32px;" @click="handleBuild">生成盘点单</el-button>
      </el-form>
      <el-table :data="gridData" style="height:309px">
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column prop="fieldCnName" align="center" label="状态" width="80" />
        <el-table-column prop="fieldCnName" align="center" label="所属门类" width="100" />
        <el-table-column prop="fieldCnName" align="center" label="子条目数" width="100" />
        <el-table-column prop="fieldCnName" align="center" label="全宗号" width="100" />
        <el-table-column prop="fieldName" align="center" label="档号" width="180" />
        <el-table-column prop="fieldCnName" align="center" label="部门名称" width="100" />
        <el-table-column label="题名" align="center" width="180" />
        <el-table-column label="年度" align="center" width="85" />
        <el-table-column label="保管期限" align="center" width="120" />
        <el-table-column label="密级" align="center" width="85" />
        <el-table-column label="存放位置" align="center" width="150" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: [],
      checkForm: {},
      addFormVisible: false,
      selectAreaValue: [],
      selectArea: [
        { value: '选项1', label: '借阅人' },
        { value: '选项2', label: '档号' },
        { value: '选项3', label: '题名' },
        { value: '选项4', label: '位置' }
      ],
      categoryValue: ['选项1'],
      category: [
        { value: '选项1', label: '全部' },
        { value: '选项2', label: '档号' },
        { value: '选项3', label: '题名' },
        { value: '选项4', label: '位置' }
      ]
    }
  },
  // mounted() {
  //   this.dialogTableStyle()
  // },
  methods: {
    // dialogTableStyle() {
    //   const dialogTableDom = this.$refs.dialogTable
    //   const targetDialog = dialogTableDom.$refs.dialog
    //   targetDialog.style.width = '1340px'
    // },
    handleBuild() {
      console.log(this.$refs.dialogTable.$refs)
    },
    handleSave() {
      this.addFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form{
    display: flex;
}
::v-deep .el-dialog{
  width: 950px;
  height: 518px;
}
</style>