xinfeiyue-web/src/views/School/components/ShowSchool.vue

<template>
  <div>
    <el-drawer
      :title="$route.meta.title"
      direction="rtl"
      size="68%"
      :visible.sync="visible"
      append-to-body
      @close="$emit('update:isShow', false)"
    >
      <section class="drawer-container">
        <el-descriptions
          class="drawer-container__desc"
          size="small"
          border
          ref="elDesc"
          :column="2"
          direction="vertical"
          :labelStyle="{ 'font-weight': '500', 'font-size': '15px' }"
        >
          <el-descriptions-item label="学校名称">
            {{ form["name"] }}
          </el-descriptions-item>

          <el-descriptions-item label="区域">
            {{
              area.find((i) => i["id"] === form["area_id"])
                ? area.find((i) => i["id"] === form["area_id"])["name"]
                : ""
            }}
          </el-descriptions-item>

          <el-descriptions-item label="学校代码">
            {{ form["code"] }}
          </el-descriptions-item>

          <el-descriptions-item label="星级">
            {{ form["star"] }}
          </el-descriptions-item>

          <el-descriptions-item label="地址">
            {{ form["address"] }}
          </el-descriptions-item>

          <el-descriptions-item label="性质">
            {{
              [
                { value: 1, label: "公办" },
                { value: 2, label: "民办" },
              ].find((i) => i["value"] === form["nature"])
                ? [
                    { value: 1, label: "公办" },
                    { value: 2, label: "民办" },
                  ].find((i) => i["value"] === form["nature"])["label"]
                : ""
            }}
          </el-descriptions-item>

          <el-descriptions-item label="学校类型">
            {{
              form["type"].toString()
            }}
          </el-descriptions-item>

          <el-descriptions-item label="建校年份">
            {{ form["build_year"] }}
          </el-descriptions-item>

          <el-descriptions-item label="是否显示">
            {{ form["is_show"] === 0 || form["is_show"] === "0" ? "否" : "是" }}
          </el-descriptions-item>

          <el-descriptions-item label="学校介绍" span="2">
            {{ form["introduce"] }}
          </el-descriptions-item>

          <el-descriptions-item label="教师信息" span="2">
            {{ form["teacher"] }}
          </el-descriptions-item>
        </el-descriptions>
      </section>
    </el-drawer>
  </div>
</template>

<script>
import { show } from "@/api/school/school";

export default {
  name: "SchoolShow",
  props: {
    isShow: {
      type: Boolean,
      default: false,
      required: true,
    },

    area: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      visible: false,
      form: {
        name: "",

        area_id: "",

        code: "",

        star: "",

        address: "",

        nature: "",

        type: "",

        build_year: "",

        introduce: "",

        teacher: "",

        is_show: 1,
      },
    };
  },
  watch: {
    isShow(newVal) {
      this.visible = newVal;
    },
    visible(newVal) {
      this.$emit("update:isShow", newVal);
    },
  },
  methods: {
    async getDetail(id) {
      try {
        const detail = await show({
          id,
        });
        for (let key in this.form) {
          if (detail.hasOwnProperty(key)) {
            this.form[key] = detail[key];
          }
        }
      } catch (err) {
        console.error(err);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.span2 {
  grid-column: span 2;
}
::v-deep .el-form-item > * {
  max-width: 100%;
}
.drawer-container {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;

  & > * {
    flex: 1;
  }
}
</style>