二维数组 手动排序

 

 

<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>