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

loulijun2021

2022-08-05 d33eacc1f85ac3a736b33ba4713a19aae466d711

 src/views/jcsz/yhqd.vue

@@ -71,7 +71,7 @@
      <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-menu" @click="workingTramClick">生产班组</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">
@@ -94,36 +94,43 @@
            prop="RowNum"
            width="50"
            label="序号"
            fixed
          />
          <el-table-column
            prop="usercode"
            label="用户编码"
            min-width="110"
            sortable="custom"
          />
          <el-table-column
            prop="username"
            label="用户名称"
            min-width="110"
            sortable="custom"
          />
          <el-table-column
            prop="password"
            label="用户密码"
            min-width="110"
            sortable="custom"
          />
          <el-table-column
            prop="org_name"
            label="所属组织"
            min-width="110"
            sortable="custom"
          />
          <el-table-column
            prop="group_name"
            label="生产班组"
            min-width="110"
            sortable="custom"
          />
          <el-table-column
            prop="wagetype"
            label="工资类型"
            sortable="custom"
            width="110"
          >
            <template slot-scope="{row}">
              <div v-if="row.wagetype==='1'">计时制</div>
@@ -133,6 +140,7 @@
          <el-table-column
            prop="mobile"
            label="联系方式"
            min-width="110"
            sortable="custom"
          >
            <template slot-scope="{row}">
@@ -144,6 +152,7 @@
            prop="email"
            label="电子邮箱"
            sortable="custom"
            min-width="110"
          >
            <template slot-scope="{row}">
              <div v-if="row.email===''">/</div>
@@ -151,8 +160,9 @@
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            prop="enable"
            label="在职状态"
            width="110"
            sortable="custom"
          >
            <template slot-scope="{row}">
@@ -163,25 +173,29 @@
          <el-table-column
            prop="lm_user"
            label="创建人员"
            width="110"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            width="200"
            width="160"
            sortable="custom"
          />
          <el-table-column
            prop="is_role"
            label="关联角色"
            width="110"
          >
            <template slot-scope="{row}">
              <i v-if="row.is_role==='Y'" class="el-icon-share" @click="roleClick({row})" />
              <i v-if="row.is_role==='N'" class="el-icon-share" style="color: #E4E7ED" @click="roleClick({row})" />
              <i v-if="row.is_role==='N'" class="el-icon-share" style="color: rgb(180 ,181, 185)" @click="roleClick({row})" />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="120"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
@@ -305,8 +319,8 @@
      title="关联角色"
      :visible.sync="dialogVisibleRoles"
      width="800px"
      top="15vh"
      :fullscreen="isFullscreen"
      :top="isIpad?'3vh':'15vh'"
      :fullscreen="isIpad"
      :close-on-click-modal="false"
      class="dialogVisibleRoles"
      @closed="handleCloseRoles"
@@ -461,16 +475,20 @@
        </div>
      </span>
    </el-dialog>

    <!--导入组件-->
    <import-picker ref="importPickerFunc" :shows.sync="shows" :title="title_value" :colos="colos" :code="code" />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import ImportPicker from '@/components/ImportPicker'

import {
  AddUpdateUser,
  DeleteUser,
  RoleTypeAdd,
  RoleTypeDelete,
  SaveUserAssoctRole,
  UserAssociationRole,
  UserGroupAdd,
@@ -488,7 +506,7 @@
export default {
  name: 'YYQD',
  components: {
    Pagination
    Pagination, ImportPicker
  },
  data() {
    const validateName = (rule, value, callback) => {
@@ -533,7 +551,7 @@
    }

    return {
      isFullscreen: false,
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
@@ -567,7 +585,7 @@
        UserCode: '',
        UserName: '',
        Password: '',
        Enable: '',
        Enable: 'Y',
        StuOrg: '',
        Mobile: '',
        Email: '',
@@ -635,23 +653,43 @@
        page: 1,
        prop: 'group_code',
        order: 'desc'
      },

      title_value: '数据导入 / 用户清单',
      code: '2',
      shows: false
    }
  },
  watch: {
    shows() {
      if (!this.shows) {
        this.getUserSearch()
      }
    }
  },
  created() {
    this.getUserSearch()
    this.getUserOrganization()
    this.handleRequest()
  },

  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    handleRequest() {
      this.getUserSearch().then(res => {
        if (res.code === '200') {
          this.getUserOrganization()
        }
      })
    },

    // 获取用户清单
    async getUserSearch() {
      const res = await UserSearch(this.form)
      this.tableData = res.data
      this.total = res.count
      return { code: res.code }
    },
    // 获取所属组织
    async getUserOrganization() {
@@ -665,7 +703,11 @@
    },
    // 导入按钮
    upload() {

      this.shows = true
      this.$refs.importPickerFunc.newDataFunc()
    },
    colos() {
      this.shows = false
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
@@ -689,7 +731,7 @@
      this.form.UserCode = ''
      this.form.UserName = ''
      this.form.StuOrg = ''
      this.form.Enable = ''
      this.form.Enable = 'Y'
      this.form.wagetype = ''
      this.$refs.cascader.checkedValue = ''// 级联选择器的清空
      this.getUserSearch()
@@ -758,7 +800,7 @@
      this.dialogForm.UserCode = ''
      this.dialogForm.UserName = ''
      this.dialogForm.Password = ''
      this.dialogForm.Enable = ''
      this.dialogForm.Enable = 'Y'
      this.$refs.dialogCascader.checkedValue = ''
      this.dialogForm.StuOrg = ''
      this.dialogForm.Mobile = ''
@@ -804,15 +846,13 @@
    },
    // 获取页面高度
    getHeight() {
      console.log(window.innerHeight)
      console.log(window.innerWidth)
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 250
        this.tableHeight = this.mainHeight - 100
        // this.isFullscreen = window.innerHeight < 800
        if (window.innerHeight < 800) {
        this.tableHeight = this.mainHeight - 50
        if (window.innerHeight < 769) {
          this.tableHeight = this.tableHeight - 50
        }
        this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
      })
    },
    // 关联角色点击事件