1.优化项目2.搜索栏多行的变为一行可展开

loulijun2021

2022-09-07 ef9633e0d1689fd8869170f3aa0af6c90c2e5e7f

 src/views/jcsz/jsqd.vue

@@ -2,10 +2,13 @@
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button icon="el-icon-setting" @click="settingButton">设置</el-button>
        <el-button icon="el-icon-download" @click="upload">导入</el-button>

        <div style="display: flex">
          <el-button icon="el-icon-setting" @click="settingButton">设置</el-button>
          <el-button icon="el-icon-download" @click="upload">导入</el-button>
        </div>
      </div>

      <div class="bodyTopFormGroup">
@@ -97,7 +100,13 @@
            min-width="160"
            label="角色描述"
            sortable="custom"
          />
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
              <div v-if="row.description">{{ row.description }}</div>
              <div v-else>/</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="lm_user"
            label="创建人员"
@@ -122,8 +131,18 @@
            sortable="custom"
          >
            <template slot-scope="{row}">
              <i v-if="row.is_user==='Y'" class="el-icon-user-solid" style="color:#42b983;cursor: pointer" @click="userClick(row)" />
              <i v-if="row.is_user==='N'" class="el-icon-user-solid" style="color: rgb(180 ,181, 185);cursor: pointer" @click="userClick(row)" />
              <i
                v-if="row.is_user==='Y'"
                class="el-icon-user-solid"
                style="color:#42b983;cursor: pointer"
                @click="userClick(row)"
              />
              <i
                v-if="row.is_user==='N'"
                class="el-icon-user-solid"
                style="color: rgb(180 ,181, 185);cursor: pointer"
                @click="userClick(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
@@ -134,7 +153,12 @@
          >
            <template slot-scope="{row}">
              <i v-if="row.is_right==='Y'" class="el-icon-share" @click="rightClick(row)" />
              <i v-if="row.is_right==='N'" class="el-icon-share" style="color: rgb(180 ,181, 185)" @click="rightClick(row)" />
              <i
                v-if="row.is_right==='N'"
                class="el-icon-share"
                style="color: rgb(180 ,181, 185)"
                @click="rightClick(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
@@ -157,7 +181,6 @@
      </div>
      <!--分页-->
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
@@ -254,7 +277,7 @@
          sortable="custom"
        >
          <template slot-scope="{row}">
            <el-input v-if="row.isVisible===1" v-model="row.roletype_code" placeholder="请输入" />
            <el-input v-if="row.isVisible===1" v-model="row.roletype_code" oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')" placeholder="请输入" />
            <div v-else> {{ row.roletype_code }}</div>
          </template>
        </el-table-column>
@@ -280,7 +303,6 @@
      </el-table>
      <!--分页-->
      <pagination
        v-show="RoleTypeCodeArrLength>0"
        :total="RoleTypeCodeArrLength"
        :page.sync="formSetting.page"
        :limit.sync="formSetting.rows"
@@ -381,12 +403,12 @@
        ref="multipleTable"
        :data="dialogFormUserTable"
        border
        :row-class-name="tableRowClassName"
        highlight-current-row
        :height="isIpad?400:365"
        :header-cell-style="this.$headerCellStyle"
        :cell-style="this.$cellStyle"
        :row-key="getRowKey"
        :row-class-name="tableRowClassName"
        @sort-change="sortChangeOfUser"
        @selection-change="handleSelectionChange"
      >
@@ -396,6 +418,7 @@
          type="selection"
          width="50"
          :reserve-selection="true"
          fixed
        />
        <el-table-column
          prop="RowNum"
@@ -421,17 +444,23 @@
          prop="flag"
          label="关联角色"
          sortable="custom"
          fixed="right"
        >
          <template slot-scope="{row}">
            <div v-if="row.flag==='Y'">是</div>
            <div v-if="row.flag==='N'">否</div>
            <div v-if="row.flag==='Y'">
              <svg-icon icon-class="circleYes" style="margin-right: 2px" />
              是
            </div>
            <div v-if="row.flag==='N'">
              <svg-icon icon-class="circleNo" style="margin-right: 2px" />
              否
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <pagination
        v-show="dialogFormUserTableLength>0"
        :total="dialogFormUserTableLength"
        :page.sync="dialogFormUser.page"
        :limit.sync="dialogFormUser.rows"
@@ -528,7 +557,14 @@
    </el-dialog>

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

  </div>
</template>
@@ -545,26 +581,14 @@
} from '@/api/jcsz'
import { getCookie } from '@/utils/auth'
import $ from 'jquery'
import clearAllChildren from '@/utils/global'
import clearAllChildren, { validateCode } from '@/utils/global'

const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
  name: 'JSQD',
  components: {
    Pagination, ImportPicker
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入编码'))
      } else {
        if (SER_HZ.test(value)) {
          return callback(new Error('编码不能为中文'))
        } else {
          callback()
        }
      }
    }
    return {
      isIpad: false,
      mainHeight: 0,
@@ -601,7 +625,7 @@
      operation: '',
      dialogFormRules: {
        RoleCode: [
          { required: true, validator: validateName, trigger: ['blur', 'change'] }
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        RoleName: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
@@ -790,6 +814,9 @@
        DeleteRole({ RoleCode: row.role_code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getRoleSearch()
          }
        })
@@ -883,6 +910,9 @@
        RoleTypeDelete({ RoleTypeCode: row.roletype_code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            if (this.formSetting.page > 1 && this.RoleTypeCodeArr.length === 1) {
              this.formSetting.page--
            }
            this.getRoleTypeSearch()
          }
        })
@@ -1026,12 +1056,13 @@
        type: ''
      }
      const { data: res } = await RoleAssociationRight(data)// 接口获取数据

      // console.log(res, 111)
      this.dialogFormRight.rightPCArr = res[0][0].is_delete === '0' ? res[0] : []
      this.dialogFormRight.rightAPPArr = res[1][0].is_delete === '0' ? res[1] : []

      this.PCTrue = res[0][0].is_delete === '0'
      this.APPTrue = res[1][0].is_delete === '0'
      this.APPTrue = res[1][0].children.filter(item => item.is_delete === '0').length === 0 ? false : res[1][0].is_delete === '0'

      // '0'显示  '1' 不显示   过滤出相对应的菜单
      if (this.PCTrue) {
        this.dialogFormRight.rightPCArr[0].children = this.dialogFormRight.rightPCArr[0].children.filter(item => item.is_delete === '0')
@@ -1041,12 +1072,13 @@
      }

      if (this.APPTrue) {
        this.dialogFormRight.rightAPPArr[0].children = this.dialogFormRight.rightAPPArr[0].children.filter(item => item.is_delete === '0')
        this.dialogFormRight.rightAPPArr[0].children = this.dialogFormRight.rightAPPArr[0].children.filter(item => item.is_delete === '0' || item.is_delete === null)
        this.dialogFormRight.rightAPPArr[0].children.forEach(item => {
          item.children = item.children.filter(it => it.is_delete === '0')
          item.children = item.children.filter(it => it.is_delete === '0' || it.is_delete === null)
          // item.children = item.children.filter(it => it.is_delete !== '1')
        })
      }

      // console.log(this.dialogFormRight.rightAPPArr[0], 234)
      // 判断哪个是高亮
      let pcIsSelected1 = false
      let pcIsSelected2 = false
@@ -1134,9 +1166,9 @@

      // 目前一期肯定是这个
      if (this.PCTrue && !this.APPTrue) {
        pcIsSelected1 = true
        // pcIsSelected1 = true
        if (rightPCArrFlag === 'Y') {
          // pcIsSelected1 = true
          pcIsSelected1 = true
          pcIsSelected2 = true

          const interval = setInterval(() => {
@@ -1151,9 +1183,9 @@
            }
          }, 100)

          // this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code
          this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code
        }
        this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code
        // this.dialogFormRight.rightCurrentCode = this.dialogFormRight.rightPCArr[0].code
      }

      if (!this.PCTrue && this.APPTrue) {
@@ -1497,6 +1529,7 @@
::v-deep .el-dialog__body {
  padding: 20px 100px !important;
}

.settingDialogVisible, .userDialogVisible, .dialogVisibleRight {
  ::v-deep .el-dialog__body {
    padding: 10px 20px !important;
@@ -1568,11 +1601,16 @@
<!--公共页面样式-->
<style lang="scss" scoped>
$main_color: #42b983;
.el-icon-share ,.el-icon-delete,.el-icon-edit-outline{
::v-deep .el-button--text{
  font-size: 14px ;
  cursor: pointer ;
}
.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
  color: $main_color;
  cursor: pointer;
}
.el-icon-edit-outline{

.el-icon-edit-outline {
  margin-right: 15px;
}

@@ -1633,8 +1671,8 @@
  background-color: #f8f8fa;
}

::v-deep .el-table__body .el-table__row.hover-row td{
  background-color: #eaecef ;
::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #eaecef;
}

::v-deep .el-form--inline .el-form-item__label {
@@ -1650,6 +1688,7 @@
.body ::v-deep .el-form-item {
  margin-bottom: 0;
}

.userDialogVisible ::v-deep .el-form-item {
  margin-bottom: 0;
}
@@ -1660,7 +1699,9 @@
.el-table .custom-row {
  background: #f8f8fa;
}
.el-form-item__label{

.el-form-item__label {
  font-weight: 400 !important
}

</style>