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'
|
import commonTable from '@/components/page/components/table/table.vue'
|
||||||
Vue.component('common-table', commonTable);
|
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'
|
import commonPayPalButton from '@/components/page/components/pendingPayment/PayPalButton.vue'
|
||||||
Vue.component('common-paypal-button', commonPayPalButton);
|
Vue.component('common-paypal-button', commonPayPalButton);
|
||||||
import commonTiff from '@/components/page/components/table/tiff.vue'
|
import commonTiff from '@/components/page/components/table/tiff.vue'
|
||||||
|
|||||||
Reference in New Issue
Block a user