对表单里面的字段进行截取,删除form表单里面的某个字段属性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37782076/article/details/85706869

​
<template>
  <div class="content-container">
    <div class="content-operate">
      <el-form :inline="true"  class="search-form-inline" label-position="right">
        <div class="content-col">
          <el-form-item label="登录账号">
            <el-input
              class="content-col-input"
              v-model="account"
              @keyup.enter.native="enterSearch()"
              @blur="inputTrimProp('account')"
              maxlength="50"
              placeholder="请输入登录账号搜索">
            </el-input>
          </el-form-item>
        </div>
        <div class="content-col">
          <el-form-item label="姓名">
            <el-input class="content-col-input"
              v-model="userName"
              @keyup.enter.native="enterSearch()"
              @blur="inputTrimProp('userName')"
              maxlength="20"
              placeholder="请输入姓名搜索">
            </el-input>
          </el-form-item>
        </div>
        <div class="content-col">
          <el-form-item label-width="80px">
            <el-button type="primary" class="el-button-reset" @click="queryData">查询</el-button>
            <el-button class="el-button-reset" @click="searchReset">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="managers"
        style="width: 100%; font-size: 13px;">
        <el-table-column
          align="left"
          prop="account"
          label="登录账号"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          align="left"
          label="姓名"
          prop="userName"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="角色"
          width="200">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div class="contentMore">
                <span v-for="(role, index) in scope.row.roles" :key="index">
                  {{role.roleName}}<span v-if="index !== (scope.row.roles.length - 1)">,</span>
                </span>
              </div>
              <div slot="content">
                <span v-for="(role, index) in scope.row.roles" :key="index">
                  {{role.roleName}}<span v-if="index !== (scope.row.roles.length - 1)">,</span>
                </span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="管理范围"
          prop="orgName"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          align="left"
          label="上次登录时间"
          width="150">
          <template slot-scope="scope">
            <span v-text="scope.row.lastLogin ? scope.row.lastLogin.slice(0, 10) : '' "></span>
           <!-- 也可以这么写<span {{scope.row.lastLogin ? scope.row.lastLogin.slice(0, 10) : ''}} ></span> -->
          </template>
        </el-table-column>
        <el-table-column
          width="100px"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">正常</span>
            <span v-if="scope.row.status === 0">禁用</span>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          label="操作">
          <template slot-scope="scope">
            <el-button class="operate" @click="forbidden(scope.row.orgManagerId, 0)" type="text" v-if="scope.row.status === 1">禁用</el-button>
            <el-button class="operate" @click="use(scope.row.orgManagerId, 1)" type="text" v-if="scope.row.status === 0">启用</el-button><div class="segment">|</div>
            <el-button class="operate" @click="editManager(scope.row)" type="text">编辑</el-button><div class="segment">|</div>
            <el-button class="operate" @click="deleteUserConfirm(scope.row.orgId, scope.row.userId)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @current-change="getManagers"
        :current-page.sync="pageIndex"
        :page-size="pageNum"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="编辑管理员" width="590px" :visible.sync="dialogVisible" class="dialog-set">
      <el-form :model="adminForm" ref="adminForm" :rules="adminRoles" label-width="79px" >
        <el-form-item label="角色" prop="roleIds">
          <div class="dialog-set-role" ref='roleRef' id="roleId">
            <el-checkbox-group v-model="adminForm.roleIds" class="dialog-set-role-check">
              <el-checkbox v-for="role in allRole" :label="role.roleId" :key="role.roleId">{{role.roleName}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="管理部门" prop="orgId">
          <div class="dialog-set-org">
            <el-tree
              ref="depTree"
              :data="orgTree"
              node-key="orgId"
              accordion
              :highlight-current='true'
              default-expand-all
              :props="defaultProps"
              @node-click="selectDep">
            </el-tree>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="4"
            v-model="adminForm.remark"
            maxlength="100"
            placeholder="请输入内容,100字以内">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="el-button-reset" @click="restForm('adminForm')">取 消</el-button>
        <el-button class="el-button-reset" type="primary" @click="setAdmin('adminForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import manageApi from '@/api/manageApi';
import depApi from '@/api/depApi';
import userApi from '@/api/userApi';

export default {
  name: 'MenuTable',
  data() {
    const checkRoles = (role, value, callback) => {
      if (value.length === 0) {
        this.$refs.roleRef.style.borderColor = '#f56c6c';
        return callback(new Error('请至少选择一个角色'));
      }
      this.$refs.roleRef.style.borderColor = '#DCDFE6';
      return callback();
    };
    return {
      // 分页（当前页码、每页数据条数、全部数据条数）
      pageIndex: 0,
      pageNum: 10,
      total: 0,
      // 搜索条件
      account: '',
      userName: '',
      // 管理员数组
      managers: [],
      // 编辑管理员窗口
      dialogVisible: false,
      // 当前操作的管理员对象
      nowManage: {},
      // 编辑的管理员的对象
      adminForm: {
        roleIds: [],
        remark: '',
        orgId: '',
        userId: '',
      },
      // 存储全部角色
      allRole: [],
      // 组织树
      orgTree: [],
      defaultProps: {
        children: 'childs',
        label: 'orgName',
      },
      // 管理员编辑表单校验
      adminRoles: {
        roleIds: [
          // { type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' },
          { validator: checkRoles, trigger: 'change' },
        ],
        orgId: [
          { required: true, message: '请选择管理的部门', trigger: 'change' },
        ],
      },
    };
  },
  methods: {
    inputTrimProp(prop) {
      this[prop] = this[prop].trim();
    },
    enterSearch() {
      this.inputTrimProp('account');
      this.inputTrimProp('userName');
      this.queryData();
    },
    queryData() {
      this.pageIndex = 1;
      this.getManagers();
    },
    // 将搜索条件重置后查询管理员
    searchReset() {
      this.userName = '';
      this.account = '';
      this.pageIndex = 1;
      this.getManagers();
    },
    // 获取全部的管理员
    getManagers() {
      const params = {
        params: {
          userName: this.userName,
          account: this.account,
          pageIndex: this.pageIndex - 1,
          pageNum: this.pageNum,
        },
      };
      manageApi.getManagers({
        params,
      }).then((reponse) => {
        if (reponse.state === 0) {
          this.managers = reponse.data.data;
          this.total = reponse.data.count;
        } else {
          this.$message.error(reponse.message);
        }
      }).catch((err) => {
        this.$message.error(err.message);
      });
    },
    forbidden(orgManagerId, status) {
      this.$confirm('确定禁用该管理员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          params: {
            orgManagerId,
            status,
          },
        };
        manageApi.forbidden({
          params,
        }).then((reponse) => {
          if (reponse.state === 0) {
            this.$message({
              type: 'success',
              message: '已禁用管理员',
            });
            this.getManagers();
          } else {
            this.$message.error(reponse.message);
          }
        }).catch((err) => {
          this.$message.error(err.message);
        });
      }).catch(() => {

      });
    },
    use(orgManagerId, status) {
      this.$confirm('确定启用该管理员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          params: {
            orgManagerId,
            status,
          },
        };
        manageApi.forbidden({
          params,
        }).then((reponse) => {
          if (reponse.state === 0) {
            this.$message({
              type: 'success',
              message: '已启用管理员',
            });
            this.getManagers();
          } else {
            this.$message.error(reponse.message);
          }
        }).catch((err) => {
          this.$message.error(err.message);
        });
      }).catch(() => {
      });
    },
    deleteUserConfirm(orgId, userId) {
      this.$confirm('确定删除管理员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.deleteUser(orgId, userId);
      }).catch(() => {
      });
    },
    deleteUser(orgId, userId) {
      const params = {
        params: {
          orgId,
          userId,
        },
      };
      manageApi.deleteUser({
        params,
      }).then((reponse) => {
        if (reponse.state === 0) {
          this.$message({
            type: 'success',
            message: '已删除管理员',
          });
        } else {
          this.$message.error(reponse.message);
        }
      }).catch((err) => {
        this.$message.error(err.message);
      });
      this.getManagers();
    },
    // 编辑管理员
    editManager(manager) {
      this.dialogVisible = true;
      this.nowManage = manager;
      this.adminForm.roleIds = this.nowManage.roles;
      this.adminForm.roleIds = [];
      for (let i = 0; i < this.nowManage.roles.length; i += 1) {
        this.adminForm.roleIds.push(this.nowManage.roles[i].roleId);
      }
      this.adminForm.remark = this.nowManage.remark;
      this.adminForm.orgId = this.nowManage.orgId;
      this.getAllRole();
      this.getAllOrg();
    },
    // 获取全部角色
    getAllRole() {
      const params = {
        params: {
          searchKeyword: '',
        },
      };
      userApi.getRole({
        params,
      }).then((data) => {
        if (data.state === 0) {
          this.allRole = data.data;
        }
      }).catch(() => {
        this.$message({
          message: '获取角色不成功',
          type: 'warning',
        });
      });
    },
    // 查找全部部门
    getAllOrg() {
      depApi.getAllOrg().then((response) => {
        if (response.state === 0) {
          this.orgTree = response.data;
          // 设置部门默认选中
          const defSelect = [];
          defSelect[0] = this.nowManage.orgId;
          this.$nextTick(() => {
            this.$refs.depTree.setCurrentKey(defSelect[0]);
          });
        } else {
          this.$message.error(response.message);
        }
      }).catch(() => {
      });
    },
    selectDep(data) {
      this.adminForm.orgId = data.orgId;
    },
    setAdmin(formName) {
      const params = {
        data: {
          orgId: this.adminForm.orgId,
          orgManagerId: this.nowManage.orgManagerId,
          remark: this.adminForm.remark,
          roleIds: this.adminForm.roleIds,
          userId: this.nowManage.userId,
        },
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          manageApi.setAdmin({
            params,
          }).then((response) => {
            if (response.state === 0) {
              this.$message({
                message: '管理员信息已编辑',
                type: 'success',
              });
              this.getManagers();
              this.$refs[formName].resetFields();
            }
          }).catch((error) => {
            console.log(error);
          });
          return true;
        }
        return false;
      });
    },
    restForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
  },
  mounted() {
    this.getManagers();
  },
};

</script>

<style lang="less" scoped>
.content-container {
  padding: 0 20px;
  background: #fff;
  overflow: hidden;
}
.content-col{
  width: 33.33%;
  float: left;
}
.content-col .el-form-item{
  margin-bottom: 0px;
  width: 100%;
}
.content-row {
  overflow: hidden;
}
.content-col-input {
  width: 100%;
}
.fl {
  float: left;
}

.fr {
  float: right;
}

.content-row--classify {
  padding: 4px 0 22px 0;
  border-bottom: 1px dashed #ebeef5;
}
.content-row--tool-first {
  margin-top: 26px;
}
.content-row--operate {
  margin-bottom: 6px;
}
.content-row--tool {
  margin-bottom: 20px;
}

.content-tool {
  padding: 20px;
  border: 1px solid #ebeef5;
  background: #fff;
  font-size: 14px;
  color: #606266;
  overflow: hidden;
}

.content-tool--title {
  margin-right: 12px;
  height: 36px;
  line-height: 36px;
  width: 44px;
}
.content-tool--input {
  width: calc(100% - 250px);
  height: 36px;
}
.content-tool--input input {
  height: 36px;
  line-height: 36px;
}
.content-tool--operate {
  float: left;
  margin-left: 20px;
}
.content-tool--qry {
  width: 80px;
}
.content-tool--reset {
  width: 80px;
  margin-left: 10px;
}

.set-ellipesd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-tool--nav {
  width: 100%;
  float: left;
}

.content-operate {
  padding: 27px 20px;
  overflow: hidden;
  border: 1px solid #EBEEF5;
  margin-bottom: 20px;
}
.content-operate--add {
  width: 80px;
  float: left;
}
.content-operate--input {
  float: right;
  width: 272px;
  height: 36px;
}
.edit-operation {
  color: #20A0FF;
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  border-left: 1px solid #EBEEF5;
  cursor: pointer;
}
.edit-operation:first-child {
  padding-left: 0px;
  padding-right: 10px;
  border-left: 0px solid #EBEEF5;
}
.edit-operation:last-child {
  padding-left: 10px;
  padding-right: 0px;
}
.block {
  float: right;
  margin-left: -5px;
  margin-top: 20px;
}
.contentMore {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.operate {
  float: left;
  padding: 4px 0px 0px 0px;
}
.segment {
  float: left;
  position: relative;
  color: #EBEEF5;
  margin-left: 10px;
  margin-right: 10px;
}
.dialog-set {
  &-role {
    height: 125px;
    width: 470px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    overflow: auto;
    margin-right: 0px;
    &-check {
      .el-checkbox {
        margin: 0px;
        width: calc(50% - 20px);
        float: left;
        padding-left: 20px
      }
    }
  }
  &-org {
    height: 150px;
    width: 470px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    overflow: auto;
    margin-right: 0px;
    .el-tree {
      margin: 11px 14px
    }
  }
  &-remark {
    height: 100px;
    width: 470px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-right: 0px;
  }
}
</style>

<style>
.search-form-inline .el-form-item__content{
  width: 70%;
}
</style>

​

删除form表单中的某个字段，直接用delete。

adminForm: {
        roleIds: [],
        remark: '',
        orgId: '',
        userId: '',
      },

delete this.adminForm.remark ;