train-student/src/layout/class/nameList/stuNameList.vue

<template>
  <div id="stuNameList">
    <el-row>
      <el-row type="flex" justify="center" style="padding:10px 0">
        <el-col :span="6">
          <el-button type="primary" plain size="mini" @click.native="$router.push({ path: '/class/achieve', query: { classid: $attrs.classid } })">
            查看平时成绩
          </el-button>
        </el-col>
      </el-row>

      <el-col :span="24" v-if="user.job == '班长'"> </el-col>
      <el-col :span="24" class="info">
        <el-col :span="12" class="list" v-for="(item, index) in stuNameList" :key="index">
          <p class="name" @click="submitinfo(item)">{{ item.name }}</p>
          <p class="job" v-if="item.job">
            职务:{{ item.job }}<span v-if="item.job == '班长' || item.job == '学委'"><i class="el-icon-circle-check"></i></span>
          </p>
          <el-col :span="24" class="job">性别:{{ item.gender }}</el-col>
          <el-col :span="24" class="job">寝室号:{{ item.bedroom }}</el-col>
          <el-col :span="24" class="job"
            ><i class="el-icon-phone"></i><el-link href="tel:01234567890" :underline="false">:{{ item.phone }}</el-link></el-col
          >
        </el-col>
      </el-col>
    </el-row>
    <van-popup v-model="show" position="bottom">
      <van-form @submit="onSubmit">
        <van-field
          v-model="newform.name"
          disabled
          name="学生名称"
          label="学生名称"
          placeholder="请输入学生名称"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />

        <van-field readonly clickable name="picker" :value="newform.job" label="选择器" placeholder="点击选择城市" @click="showPicker = true" />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
        <van-field name="radio" label="选择优秀学生">
          <template #input>
            <van-radio-group v-model="newform.is_fine" direction="horizontal">
              <van-radio name="0">否</van-radio>
              <van-radio name="1">是</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
export default {
  name: 'stuNameList',
  props: {
    stuNameList: null,
  },
  components: {},
  data: () => ({
    newform: {},
    form: {},
    show: false,
    newshow: false,
    value: '',
    columns: [],
    showPicker: false,
    column1: ['文艺委员', '安全委员', '普通学生'],
    column2: ['文艺委员', '普通学生'],
    column3: ['安全委员', '普通学生'],
    column4: ['普通学生'],
  }),
  created() {},
  computed: { ...mapState(['user']) },
  methods: {
    onSubmit(values) {
      this.$emit('newsubmit', { data: this.newform });
      this.show = false;
    },

    submitinfo(item) {
      // this.value = item.job;
      console.log(this.stuNameList);
      var wenyi = this.stuNameList.filter(item => item.job == '文艺委员');
      var anquan = this.stuNameList.filter(item => item.job == '安全委员');
      console.log('ccc');
      // this.value = item.job;
      // this.columns = this.column1;
      if (wenyi.length == '1') {
        if (anquan.length == '0') {
          if (item.job == '文艺委员') {
            this.columns = this.column1;
          } else {
            console.log('2313');
            this.columns = this.column3;
          }
        } else if (anquan.length == '1') {
          console.log('c');

          if (item.job == '普通学生') {
            this.columns = this.column4;
          } else if (item.job == '安全委员') {
            this.columns = this.column3;
          } else if (item.job == '文艺委员') {
            this.columns = this.column2;
          }
        }
      } else if (wenyi.length == '0') {
        if (anquan.length == '0') {
          console.log('cc3123');
          this.columns = this.column1;
        } else if (anquan.length == 1) {
          if (item.job == '安全委员') {
            this.columns = this.column1;
          } else {
            this.columns = this.column2;
          }
        }
      }
      this.show = true;
      this.newform = item;
    },

    //设置优秀学员
    goodstu(item) {
      this.newshow = true;
    },

    onConfirm(job) {
      this.$set(this.form, `job`, job);

      this.showPicker = false;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.list {
  padding: 10px 0;
  border-bottom: 1px dashed #ccc;
  margin: 0 10px;
  width: 44%;
}
.list .name {
  text-align: center;
  font-size: 14px;
}
.list .job {
  text-align: center;
  font-size: 12px;
  color: #405ffe;
  padding: 5px 0 0 0;
}

/deep/.van-popup--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
}
</style>