<template>
<div>
<el-dialog
v-bind="$attrs"
v-on="$listeners"
@open="onOpen"
@close="onClose"
:title="title"
width="800px"
>
<el-form
ref="elForm"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="题库" prop="field101">
<el-select
v-model="formData.field101"
placeholder="请选择下拉选择下拉选择"
clearable
:style="{ width: '100%' }"
multiple
@change="changeFn"
>
<el-option
v-for="(item, index) in field101Options"
:key="index"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div>
<div
class="mb20 store-box"
v-for="(item, index) in listData"
:key="index"
>
<div class="flexa" style="height: 180px">
<div class="store-title flexa h bxs">
<div class="tc w">{{ item.label }}</div>
</div>
<div class="pl10">
<div
class="mb10 flexa"
v-for="(mitem, mindex) in item.baseTypeList"
:key="index + 'a' + mindex"
>
<span class="mr10">{{ mitem.basetypename }}</span>
<el-input
placeholder="题数"
v-model="mitem.numNum"
style="width: 210px"
type="number"
:step="1"
:min="1"
@input="
() => {
mitem.numNum = Number(mitem.numNum).toFixed();
endTotalFn(item);
}
"
>
<template slot="prepend">随机抽</template>
<template slot="append">题</template>
</el-input>
<el-input
class="ml20"
placeholder="分数"
v-model="mitem.scoreNum"
style="width: 200px"
type="number"
:step="1"
:min="1"
@input="
() => {
mitem.scoreNum = Number(mitem.scoreNum).toFixed();
endTotalFn(item);
}
"
>
<template slot="prepend">每题</template>
<template slot="append">分</template>
</el-input>
<span class="ml10 mr10"
>共计
<span v-if="mitem.numNum && mitem.scoreNum">{{
(mitem.numNum * mitem.scoreNum).toFixed(1)
}}</span>
分</span
>
<i
class="ml10 f25 iconfont icon-xiangshangyuanjiantoushangjiantouxiangshangmianxing corblue"
@click.prevent="up(mindex, item, index)"
></i>
<i
class="ml10 f25 iconfont icon-xiangshangyuanjiantoushangjiantouxiangshangmianxing-copy corblue"
@click.prevent="down(mindex, item, index)"
></i>
</div>
<div class="tr" style="padding-right: 80px">
总分 {{ item.total }} 分
</div>
</div>
</div>
</div>
</div>
<div slot="footer">
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handelConfirm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
components: {},
props: ["title"],
data() {
return {
formData: {
field101: undefined, //下拉选择
},
rules: {
field101: [
{
required: true,
message: "请选择下拉选择下拉选择",
trigger: "change",
},
],
},
field101Options: [
{
label: "题库1",
value: 1,
},
{
label: "电工的题库2",
value: 2,
},
],
baseTypeList: [
{ basetypename: "单选题", basetypeid: "a", scoreNum: "", numNum: "" },
{ basetypename: "多选题", basetypeid: "b", scoreNum: "", numNum: "" },
{ basetypename: "判断题", basetypeid: "c", scoreNum: "", numNum: "" },
],
listData: [],
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
endTotalFn(item) {
// item
// for (let index = 0; index < item.baseTypeList.length; index++) {
// let mitem = item.baseTypeList[index];
// }
item.total = item.baseTypeList.reduce((a, b) => {
return a + Number(b.numNum * b.scoreNum);
}, 0);
console.log(item.total);
},
// 上移
up(i, item, index) {
if (i == 0) {
this.$message({
message: "已处于置顶，无法上移",
type: "warning",
});
} else {
let cur = this.listData[index].baseTypeList; // 当前选项
cur.splice(i - 1, 0, cur[i]);
cur.splice(i + 1, 1);
}
},
// 下移
down(i, item, index) {
if (i == this.listData[index].baseTypeList.length - 1) {
this.$message({
message: "已处于置底，无法下移",
type: "warning",
});
} else {
let cur = this.listData[index].baseTypeList;
let temp = cur[i];
this.$set(cur, i, cur[i + 1]);
this.$set(cur, i + 1, temp);
}
},
changeFn(val) {
console.log(val);
// let role = { ...this.role };
let arr = [];
for (let i = 0; i < val.length; i++) {
let obj = {};
obj = this.field101Options.find((item) => {
return item.value === val[i]; //筛选出匹配数据
});
console.log(obj);
if (obj.value) {
arr.push({
...obj,
total: 0,
baseTypeList: JSON.parse(JSON.stringify(this.baseTypeList)),
});
}
}
// role.planRelationLines = arr;
this.listData = arr;
console.log(arr);
},
onOpen() {
this.title = this.$attrs.title;
},
onClose() {
this.$refs["elForm"].resetFields();
},
close() {
this.$emit("update:visible", false);
},
handelConfirm() {
this.$refs["elForm"].validate((valid) => {
if (!valid) return;
this.$emit("confirm");
this.close();
});
},
},
};
</script>
<style lang="scss" scoped>
.store-box {
border: 1px solid rgba(217, 220, 228, 1);
}
.store-title {
height: 100%;
border-right: 1px solid rgba(217, 220, 228, 1);
padding: 10px;
width: 60px;
}
</style>
