更新elemenui版本、添加模块详情2

long

2021-11-04 2f7798820057f2c996640e221cddd02a27f64621

更新elemenui版本、添加模块详情2

 package.json

@@ -16,7 +16,7 @@
  "dependencies": {
    "axios": "0.18.1",
    "core-js": "3.6.5",
    "element-ui": "2.13.2",
    "element-ui": "^2.15.6",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",

 src/pages/demo/detail2.vue

New file
@@ -0,0 +1,165 @@
<template>
  <div class="app-container">
    <!-- 返回按钮和标题 -->
    <el-page-header class="mb20" :content="objectName+'详情'" @back="$router.go(-1)" />

    <el-descriptions title="基本信息" :column="3" label-class-name="my-label" class="mb20">
      <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template>
      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>

    <!-- upload放大图片 -->
    <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
      <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
    </el-dialog>

    <back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
  </div>
</template>

<script>
import mixin_Upload from '@/mixins/upload.js'
import BackToTop from '@/components/BackToTop'
export default {
  name: 'Demo',
  components: { BackToTop },
  mixins: [mixin_Upload],
  data() {
    return {
      id: this.$route.query.id || '',
      showSearch: true, // 是否显示搜索区
      keyWord: '', // 搜索区字段，可自行扩展其余字段

      // TODO
      objectName: 'xx', // 对象名称，用于删除提示、启用提示、弹窗标题等

      // 数据
      detail: '',

      // 表单校验
      rules: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.getDetail()
    },

    // 获取列表
    getDetail() {
      var { id } = this
      this.postFN({
        url: 'admin/student/see',
        params: {
          id: id
        },
        mockData: {
          code: 100,
          msg: '',
          data: {
            allergyData: '["花生"]',
            birthday: '2017-07-13',
            createTime: '2021-06-10 14:49:15',
            dayStatus: 0,
            dayTime: null,
            fatherName: '黄大大',
            headImg: 'https://phitab20.oss-cn-shenzhen.aliyuncs.com/imagesUrl/IMG/5162a280-6ed5-4cfb-bb3c-02fc90d30209.jpg',
            id: 'f8b32dc8c9b711ebb79300163e0133f7',
            inTime: '2021-06-10 00:00:00',
            isDel: 0,
            isUp: 1,
            linkTel1: '15999971794',
            linkTel2: '13631419717',
            motherName: '陈晓晓',
            name: '黄小雯',
            numberNo: '0000010',
            outTime: '2023-07-01 00:00:00',
            remark: '1111',
            schoolClassId: '1',
            sexType: 2,
            status: 0
          }
        }
      }, (inf) => {
        this.detail = inf
      })
    },

    // 删除
    handleDelete(item) {
      // 打开二次确认弹窗
      this.$confirm('是否确认删除该' + this.objectName + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定回调
        // TODO url
        this.postFN({
          url: 'xxx',
          params: {
            id: item.id
          },
          mockData: {
            code: 100,
            msg: '',
            data: {}
          }
        }, () => {
          this.getList()
          this.$messageSuc('删除成功')
        })
      }).catch(() => {})
    },
    // 修改是否上架
    handleUpChange(item) {
      const text = item.isUp === 1 ? '上架' : '下架'
      this.$confirm('确认要' + text + '该' + this.objectName + '吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO url
        this.postFN({
          url: 'xxx',
          params: {
            id: item.id,
            isUp: item.isUp
          },
          mockData: {
            code: 100,
            msg: '',
            data: {}
          }
        }, () => {
          this.$messageSuc(text + '成功')
        }, (res) => {
          item.isUp = item.isUp === 1 ? 0 : 1
          this.$messageError(res.msg)
        })
      }).catch(() => {
        item.isUp = item.isUp === 1 ? 0 : 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-label{
  white-space: nowrap;
  font-weight: bold
}
</style>

 src/router/demo_router.js

@@ -36,6 +36,12 @@
      meta: { title: '模板详情' }
    },
    {
      path: 'detail2',
      component: () => import('@/pages/demo/detail2'), // Parent router-view
      name: 'demoDetail2',
      meta: { title: '模板详情2' }
    },
    {
      path: 'listDialog',
      component: () => import('@/pages/demo/classList'), // Parent router-view
      name: 'listDialog',