major
This commit is contained in:
File diff suppressed because it is too large
Load Diff
190
src/components/page/components/major/index.vue
Normal file
190
src/components/page/components/major/index.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div class="block commonMajor" style="width: 100%">
|
||||
<el-button type="primary" plain size="mini" @click="handleAdd" style="float:right"><i class="el-icon-plus" ></i>Add Major</el-button>
|
||||
|
||||
<el-dialog title="Add Major" :visible.sync="coreVisible1" width="780px" :close-on-click-modal="false">
|
||||
<el-form :model="coreForm1" :rules="rules1" ref="core_Form1" label-width="140px" >
|
||||
<el-form-item prop="major">
|
||||
<span slot="label">
|
||||
<i style="color: #f56c6c; margin-right: 4px">*</i>
|
||||
Major
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-for="(field, index) in fields"
|
||||
:key="index"
|
||||
class="cascader-container"
|
||||
style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between"
|
||||
>
|
||||
<!-- <span style="margin-right: 10px; font-size: 12px; color: #006699; font-weight: bold">Major {{ Number(index+1) }} :</span> -->
|
||||
|
||||
<el-cascader
|
||||
:ref="`cascader${index}`"
|
||||
@change="handleChange(index)"
|
||||
v-model="field.selectedValue"
|
||||
:placeholder="'Please select Major'"
|
||||
:options="options"
|
||||
:props="getProps()"
|
||||
style="width: calc(100%)"
|
||||
></el-cascader>
|
||||
|
||||
<!-- Delete button -->
|
||||
<!-- <el-button size="mini" type="danger" style="margin-left: 10px;" @click="handleDelete(index)"><i class="el-icon-delete"></i></el-button> -->
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="coreVisible1 = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="onSubmit_core1(coreForm1)">Save</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 渲染多个 el-cascader 组件 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
userId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules1:{},
|
||||
coreVisible1: false,
|
||||
coreForm1: {
|
||||
majorList: []
|
||||
},
|
||||
fields: [{}], // 用于存储多个领域的选项数据
|
||||
options: [] // 用于存储级联选择的选项数据
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.loadFields(); // 初始化时加载数据
|
||||
},
|
||||
methods: {
|
||||
handleChange(i) {
|
||||
console.log('.blur at line 45:');
|
||||
console.log('i at line 40:', i);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs[`cascader${i}`][0].dropDownVisible = false;
|
||||
this.coreForm1.majorList = this.fields[i].selectedValue;
|
||||
|
||||
|
||||
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
onSubmit_core1(coreForm) {
|
||||
console.log('coreForm at line 1963:', coreForm);
|
||||
if(!this.fields[0].selectedValue||this.fields[0].selectedValue.length == 0){
|
||||
this.$message.error('Please select Major!');
|
||||
return false;
|
||||
}
|
||||
this.$refs.core_Form1.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$api
|
||||
.post('api/User/addUserMajor', {
|
||||
user_id: this.userId,
|
||||
major_id: this.coreForm1.majorList[this.coreForm1.majorList.length - 1]
|
||||
})
|
||||
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Personal information modified successfully!');
|
||||
this.coreVisible1 = false;
|
||||
// this.tipVisible = false;
|
||||
this.$emit('load')
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
} else {
|
||||
this.$message.error('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 动态添加一个新的 Cascader
|
||||
handleAdd() {
|
||||
this.$nextTick(() => {
|
||||
this.fields=[]
|
||||
this.fields.push({ selectedValue: [] }); // 添加一个新的字段
|
||||
this.coreVisible1 = true;
|
||||
});
|
||||
},
|
||||
|
||||
// 删除指定的 Cascader
|
||||
handleDelete(index) {
|
||||
this.fields.splice(index, 1); // 删除指定索引的字段
|
||||
},
|
||||
|
||||
// 获取 Cascader 配置
|
||||
getProps() {
|
||||
return {
|
||||
value: 'value',
|
||||
label: 'label',
|
||||
children: 'children',
|
||||
checkStrictly: true, // 允许任意选择一级
|
||||
expandTrigger: 'hover' // 使用 hover 触发展开
|
||||
};
|
||||
},
|
||||
|
||||
// API 调用，获取子节点数据
|
||||
getMajor(majorId) {
|
||||
return this.$api
|
||||
.post('api/Ucenter/getMajor', { major_id: majorId })
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
console.error('API Error:', error);
|
||||
return [];
|
||||
});
|
||||
},
|
||||
|
||||
// 加载多个领域数据
|
||||
loadFields() {
|
||||
this.$api.post('api/Major/getMajorList', {}).then((res) => {
|
||||
const transformData = (data) => {
|
||||
return data.map((item) => {
|
||||
const transformedItem = {
|
||||
...item,
|
||||
value: item.major_id,
|
||||
label: `${item.major_title}`
|
||||
};
|
||||
|
||||
// 如果存在 children，递归处理
|
||||
if (item.children && item.children.length > 0) {
|
||||
transformedItem.children = transformData(item.children);
|
||||
}
|
||||
|
||||
return transformedItem;
|
||||
});
|
||||
};
|
||||
|
||||
// 执行递归，获取选项数据
|
||||
const data = transformData(res.data.majors.find((item) => item.major_id == 1).children);
|
||||
this.options = [...data]; // 将选项数据赋给 options
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 你可以根据需要自定义样式 */
|
||||
.cascader-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
::v-deep input[aria-hidden='true'] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -73,6 +73,8 @@ Vue.component("Editor", Editor);
|
||||
|
||||
import commonTable from '@/components/page/components/table/table.vue'
|
||||
Vue.component('common-table', commonTable);
|
||||
import commonMajor from '@/components/page/components/major/index.vue'
|
||||
Vue.component('common-major', commonMajor);
|
||||
import commonPayPalButton from '@/components/page/components/pendingPayment/PayPalButton.vue'
|
||||
Vue.component('common-paypal-button', commonPayPalButton);
|
||||
import commonTiff from '@/components/page/components/table/tiff.vue'
|
||||
|
||||
Reference in New Issue
Block a user