点开“编辑队员”,屏幕突然一直加载不出来,不知道是前端的问题还是数据库的问题
要做的是点击弹出一个可以填入信息的对话框,可以添加或删除条目
数据库如下,不知道为什么editpeople这个表不能给teamname字段设置主键,有1062错误,会不会是因为另一个表也有teamname字段(我打算设置外键,一个队名对应一个队伍人员信息,结果外键也设置不了)
相关模块代码如下(我觉得可能是data获取不到数据库信息)
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
v-hasPermi="['system:team']"
>队员分配</el-button>
<!-- 添加或修改编辑队伍人员对话框 -->
<el-dialog :title="title" :visible.sync="edit" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="lineAdd"
>新增</el-button>
</el-col>
<el-row v-for="(e, item) in temp.peopleList" :key="item">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="电话" prop="peoplephone">
<el-input v-model="form.peoplephone" placeholder="请输入电话" />
</el-form-item>
<el-form-item label="岗位" prop="position">
<el-select v-model="form.position" placeholder="请选择岗位">
<el-option
v-for="dict in dict.type.position"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-row>
</el-form>
<el-col :span="3">
<el-button
size="mini"
type="text"
@click="deleteRow(item)"
>删除</el-button>
</el-col>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
/** 添加记录按钮操作 */
/**
* 新增<前端假新增>
*/
lineAdd(item) {
this.temp.peopleList.push({
name: '',
peoplephone: '',
position: '',
})
},
/**
* 删除<前端假删除>
* @param index 当前点击元素索引
*/
deleteRow(item) {
// console.log('index', index)
this.$confirmBox('确定删除?', '提示').then(() => {
for (let i = 0; i < this.temp.peopleList.length; i++) {
if (item === i) {
this.temp.peopleList.splice(i,1)
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
})
}
}
})
},
/** 分配队员按钮操作 */
handleEdit(row) {
this.loading = true;
this.reset();
const teamname = row.teamname || this.teamnames
getEditpeople(teamname).then(response => {
this.loading = false;
this.form = response.data;
this.edit= true;
this.title = "编辑队伍人员";
});
},
data() {
return {
temp:[],
defaultTemp:{
},