train-center/src/views/school/detail.vue

<template>
  <div id="detail">
    <detail-frame :title="pageTitle" returns="./index">
      <data-form :data="info" :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew">
        <template #radios="{item}">
          <template v-if="item.model === 'hascar'">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </template>
        </template>
      </data-form>
    </detail-frame>
  </div>
</template>

<script>
import detailFrame from '@frame/layout/admin/detail-frame';
import dataForm from '@frame/components/form';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: school } = createNamespacedHelpers('school');
export default {
  name: 'detail',
  props: {},
  components: { detailFrame, dataForm },
  data: () => {
    return {
      info: {},
      fields: [
        { label: '学校名称', required: true, model: 'name' },
        { label: '学校代码', required: true, model: 'code' },
        { label: '学校地点', required: true, model: 'place' },
        { label: '学校简称', required: true, model: 'shortname' },
        { label: '每期人数', required: true, model: 'number', type: 'number' },
        { label: '是否派车', required: true, model: 'hascar', type: 'radio' },
      ],
      rules: {
        name: [{ required: true, message: '请输入学校名称' }],
        code: [{ required: true, message: '请输入学校代码' }],
        place: [{ required: true, message: '请选择学校地点' }],
        shortname: [{ required: true, message: '请输入学校简称' }],
        number: [{ required: true, message: '请输入每期人数' }],
        hascar: [{ required: true, message: '请选择是否派车' }],
      },
    };
  },
  created() {},
  methods: {
    ...school(['fetch', 'update']),
    async search() {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res)) this.$set(this, `info`, res.data);
      this.loading = false;
    },
    async handleSave({ isNew, data }) {
      let res;
      let msg;
      if (!data.hascar) data.hascar = '0';
      if (isNew) {
        res = await this.create(data);
        msg = `${this.keyWord}添加成功`;
      } else {
        res = await this.update(data);
        msg = `${this.keyWord}修改成功`;
      }
      if (this.$checkRes(res, msg)) this.$router.push({ path: '/dept/index' });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    isNew() {
      return this.$route.query.id ? false : true;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  watch: {
    isNew: {
      immediate: true,
      handler(val) {
        if (val) this.loading = false;
        else this.search();
      },
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>