学生编辑使用弹窗形式

xiangpei

2024-10-14 6f221dcf9554642585222f52e6ae122d45f4eb9e

学生编辑使用弹窗形式

 src/router.js

@@ -49,7 +49,7 @@
        path: 'student/list',
        component: () => import('@/views/user/student/list'),
        name: 'UserStudentPageList',
        meta: { title: '学生列表', noCache: true }
        meta: { title: '学生列表', noCache: false }
      },
      {
        path: 'student/edit',

 src/views/user/student/list.vue

@@ -39,7 +39,7 @@
      <el-table-column prop="deptNames" label="部门" />
      <el-table-column label="标签" prop="tagNames" align="center">
        <template slot-scope="{row}">
          <el-tag v-for="item, index in row.tagNames" :key="index">{{ item }}</el-tag>
          <el-tag v-for="(item, index) in row.tagNames" :key="index">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="人员状态" prop="condition" align="center" width="100px">
@@ -62,9 +62,7 @@
          <el-button size="mini" v-if="!deptAdmin()" @click="changeStatus(row)" class="link-left">
            {{ statusBtnFormatter(row.status) }}
          </el-button>
          <router-link :to="{path:'/user/student/edit', query:{id:row.id}}" class="link-left">
            <el-button size="mini" >编辑</el-button>
          </router-link>
          <el-button size="mini" @click="handleEdit(row.id)">编辑</el-button>
          <!-- <router-link :to="{path:'/log/user/list', query:{userId:row.id}}" class="link-left">
            <el-button size="mini" >日志</el-button>
          </router-link> -->
@@ -92,6 +90,64 @@
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="statusConfirm">确 定</el-button>
        <el-button @click="statusVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑"
      :visible.sync="editShow"
      width="800px"
      :before-close="handleClose">
      <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules">
        <el-form-item label="用户名："  prop="userName" required>
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码："  required>
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：" prop="realName" required>
          <el-input v-model="form.realName"></el-input>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select v-model="form.sex" placeholder="性别" clearable>
            <el-option v-for="item in sexEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期：" prop="birthDay">
          <el-date-picker v-model="form.birthDay" required type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="手机：">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="部门：" prop="deptIds" required>
          <!-- <el-select v-model="form.deptIds" multiple collapse-tags placeholder="部门" :disabled="this.$route.query.id">
            <el-option v-for="item in depts" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select> -->
          <el-cascader
            clearable
            :disabled="this.$route.query.id"
            v-model="form.deptIds"
            :options="depts"
            :props="{ emitPath: false, multiple: true, value: 'id', label: 'name',  checkStrictly: true }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="标签：" prop="tagIds">
          <el-select v-model="form.tagIds" multiple  collapse-tags placeholder="标签">
            <el-option v-for="item in tags" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" required>
          <el-select v-model="form.status" placeholder="状态">
            <el-option v-for="item in statusEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitEdit">提 交</el-button>
      </span>
    </el-dialog>

@@ -134,7 +190,36 @@
  },
  data () {
    return {
      editShow: false,
      depts: [],
      tags: [],
      value2:[],
      form: {
        id: null,
        userName: '',
        password: '',
        realName: '',
        role: 1,
        status: 1,
        age: '',
        sex: '',
        birthDay: null,
        phone: null,
        deptIds: [],
        tagIds: []
      },
      formLoading: false,
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        deptIds: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ]
      },
      user:{},
      statusVisible: false,
      upLoadUrl:'/api/admin/user/import',
@@ -173,11 +258,35 @@
  },
  created () {
    this.search();
    this.getTags();
    department.getDeptAdmins().then(res => {
      this.depts = res.response;
    })
  },
  methods: {
    handleClose() {
      this.form = {
        id: null,
        userName: '',
        password: '',
        realName: '',
        role: 1,
        status: 1,
        age: '',
        sex: '',
        birthDay: null,
        phone: null,
        deptIds: [],
        tagIds: []
      }
      this.editShow = false
      this.search()
    },
    getTags () {
      userApi.tagList(null).then(data => {
        this.tags = data.response
      })
    },
    deptAdmin() {
      return sessionStorage.getItem('deptAdmin') === '1'
    },
@@ -280,6 +389,20 @@
        this.listLoading = false
      })
    },
    handleEdit(id) {
      this.formLoading = true
      userApi.selectUser(id).then(re => {
        this.form = re.response
        this.formLoading = false
        const isEmpty = re.response.deptIds.trim().length === 0;
        if (isEmpty){
          this.form.deptIds = []
        }else {
          this.form.deptIds = re.response.deptIds.split(',').map(Number)
        }
        this.editShow = true
      })
    },
    changeStatus (row) {
      let _this = this
      userApi.changeStatus(row.id).then(re => {
@@ -302,6 +425,26 @@
        }
      })
    },
    submitEdit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          userApi.createUser(this.form).then(data => {
            if (data.code === 1) {
              this.$message.success(data.message)
              this.handleClose()
            } else {
              this.$message.error(data.message)
              this.formLoading = false
            }
          }).catch(e => {
            this.formLoading = false
          })
        } else {
          return false
        }
      })
    },
    submitForm () {
      this.queryParam.pageIndex = 1
      this.search()