1.新增 提交类按钮只能提交一次的控制2.关联类的按钮 接口返回成功后显示对话框

loulijun2021

2022-09-29 482efd9ee971fe7d799a015dc288340c85b8805c

 src/views/jcsz/yhqd.vue

@@ -356,7 +356,12 @@
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
          <el-button
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
@@ -425,7 +430,12 @@
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="rolesDialogVisibleCancel">取 消</el-button>
          <el-button type="primary" @click="rolesDialogVisibleConfirm">确 定</el-button>
          <el-button
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="rolesDialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
@@ -477,7 +487,12 @@
          sortable="custom"
        >
          <template slot-scope="{row}">
            <el-input v-if="row.isVisible===1" v-model="row.group_code" oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')" placeholder="请输入" />
            <el-input
              v-if="row.isVisible===1"
              v-model="row.group_code"
              oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')"
              placeholder="请输入"
            />
            <div v-else> {{ row.group_code }}</div>
          </template>
        </el-table-column>
@@ -531,7 +546,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>
@@ -863,6 +885,7 @@
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          const data = {
            id: this.dialogForm.id,
            UserCode: this.dialogForm.UserCode,
@@ -880,11 +903,13 @@
          }
          AddUpdateUser(data).then(res => {
            if (res.code === '200') {
              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.getUserSearch()
              this.$store.state.app.buttonIsDisabled = false
            } else {
              this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
              this.$store.state.app.buttonIsDisabled = false
            }
          })
        }
@@ -904,53 +929,71 @@
      })
    },
    // 关联角色点击事件
    async roleClick({ row }) {
    roleClick({ row }) {
      const loading = this.$loading({
        lock: true,
        text: '正在加载数据，请稍等...',
        spinner: 'el-icon-loading',
        customClass: 'osloading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      this.dialogFormRoles.rolesArrSelectedArr = []
      this.dialogFormRoles.rolesArr = []
      this.dialogFormRoles.roleTreeSelectedArr = []
      this.dialogVisibleRoles = true

      this.dialogFormRoles.username = row.username
      this.dialogFormRoles.usercode = row.usercode
      const { data: res } = await UserAssociationRole({ usercode: row.usercode })
      this.rolesAll = res.filter(item => item.children.length !== 0)
      UserAssociationRole({ usercode: row.usercode }).then(res => {
        if (res.code === '200') {
          setTimeout(() => {
            loading.close()

      const nodeKey = []// 树形回显key
      this.rolesAll.forEach((item, index) => {
        this.dialogFormRoles.rolesArr.push({
          code: item.code,
          name: item.name,
          flag: item.flag,
          isSelected1: false,
          isSelected2: false
        })
        if (item.flag === 'Y') {
          this.dialogFormRoles.rolesArr[index].isSelected2 = true
          this.$nextTick(() => {
            // $('input:checkbox').eq(index).attr('checked', true)// 自定义单选框回显
            $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显
          })
          this.dialogFormRoles.rolesArrSelectedArr.push(item.name)
          if (item.children && item.children.length > 0) {
            const Data = []
            item.children.forEach(it => {
              if (it.flag === 'Y') {
                nodeKey.push(it.code)
                Data.push(it.code)
            this.dialogVisibleRoles = true
            this.rolesAll = res.data.filter(item => item.children.length !== 0)

            const nodeKey = []// 树形回显key
            this.rolesAll.forEach((item, index) => {
              this.dialogFormRoles.rolesArr.push({
                code: item.code,
                name: item.name,
                flag: item.flag,
                isSelected1: false,
                isSelected2: false
              })
              if (item.flag === 'Y') {
                this.dialogFormRoles.rolesArr[index].isSelected2 = true
                this.$nextTick(() => {
                  // $('input:checkbox').eq(index).attr('checked', true)// 自定义单选框回显
                  $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显
                })
                this.dialogFormRoles.rolesArrSelectedArr.push(item.name)
                if (item.children && item.children.length > 0) {
                  const Data = []
                  item.children.forEach(it => {
                    if (it.flag === 'Y') {
                      nodeKey.push(it.code)
                      Data.push(it.code)
                    }
                  })
                  this.dialogFormRoles.roleTreeSelectedArr.push({ Code: item.code, Name: item.name, Data: Data })
                }
              }
            })
            this.dialogFormRoles.roleTreeSelectedArr.push({ Code: item.code, Name: item.name, Data: Data })
          }

            this.dialogFormRoles.rolesArr[0].isSelected1 = true// 默认选中第一个

            this.dialogFormRoles.roleTree = this.rolesAll.filter(item => item.code === this.dialogFormRoles.rolesArr[0].code)
            this.dialogFormRoles.roleTree[0].name = '全部'

            this.$nextTick(() => {
              this.$refs.roleTree.setCheckedKeys(nodeKey)
            })
          }, 1000)
        } else {
          loading.close()
        }
      })

      this.dialogFormRoles.rolesArr[0].isSelected1 = true// 默认选中第一个
      // this.dialogFormRoles.rolesArr[0].name = '全部'

      this.dialogFormRoles.roleTree = this.rolesAll.filter(item => item.code === this.dialogFormRoles.rolesArr[0].code)
      this.dialogFormRoles.roleTree[0].name = '全部'
      // this.dialogFormRoles.rolesArr
      console.log(nodeKey, 1)
      this.$refs.roleTree.setCheckedKeys(nodeKey)
    },
    // 处理用户关联对话框关闭事件
    handleCloseRoles() {
@@ -963,12 +1006,15 @@
    },
    // 用户关联对话框确认事件
    async rolesDialogVisibleConfirm() {
      console.log(this.dialogFormRoles.roleTreeSelectedArr, 333337)
      this.$store.state.app.buttonIsDisabled = true
      const res = await SaveUserAssoctRole(this.dialogFormRoles.roleTreeSelectedArr, this.dialogFormRoles.usercode)
      if (res.code === '200') {
        this.dialogVisibleRoles = false
        this.$message.success('保存成功！')
        await this.getUserSearch()
        this.dialogVisibleRoles = false
        this.$store.state.app.buttonIsDisabled = false
      } else {
        this.$store.state.app.buttonIsDisabled = false
      }
    },
    // 树形复选框点击事件
@@ -1368,15 +1414,17 @@
<style lang="scss" scoped>
$main_color: #42b983;

::v-deep .el-button--text{
  font-size: 14px ;
  cursor: pointer ;
::v-deep .el-button--text {
  font-size: 14px;
  cursor: pointer;
}
.el-icon-share ,.el-icon-delete,.el-icon-edit-outline{

.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;
}

@@ -1437,8 +1485,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 {
@@ -1455,18 +1503,25 @@
  margin-bottom: 0;
}

.tableFixed{
  ::v-deep .el-table__fixed-right{
.tableFixed {
  ::v-deep .el-table__fixed-right {
    height: 100% !important;
  }
  ::v-deep .el-table__fixed{

  ::v-deep .el-table__fixed {
    height: 100% !important;
  }
}

</style>
<style>
.osloading{
  font-size: 26px !important;
}

.el-loading-text{
  font-size: 26px !important;
}
.el-table .custom-row {
  background: #f8f8fa;
}