模板详情

long

2021-06-11 4ae5fbee7f608cd85d615ee055a075d51de30e59

模板详情

 src/pages/demo/detail.vue

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

    <div class="group-title">基本信息</div>
    <el-row :gutter="22" class="flex-1">
      <el-col :span="8"><div class="col-tx">公告名称：</div></el-col>
      <el-col :span="8"><div class="col-tx">订单编号：</div></el-col>
      <el-col :span="8">
        <div class="col-tx flex flex-ver">状态：
          <span v-if="order" class="status-btn" :class="'status'+order.status">{{ statusOptions[order.status].name }}</span>
        </div>
      </el-col>
      <el-col :span="8"><div class="col-tx">采购企业：</div></el-col>
      <el-col :span="8"><div class="col-tx">到货期限：</div></el-col>
    </el-row>

    <div class="flex">
      <div class="flex-1" />
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            size="small"
            type="primary"
          >重新压缩</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            size="small"
            type="danger"
          >取消订单</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 占位符 -->
    <div style="height: 100px" />

    <!-- 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>
.line{
  margin: 20px 0;
  border-bottom: 1px solid #E7E7E7;
}
.group-title{
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 30px;
  color: #000000;
  padding: 10px 0;
  border-bottom: 1px solid #E7E7E7;
  font-weight: bold;
}
.col-tx{
  margin-bottom: 20px;
  line-height: 1.4;
  .light{
    color: #0DB9B4;
  }
  .editbtn{
    padding: 4px 15px;
    font-size: 12px;
    margin-left: 10px;
  }
}
.question-item{
  margin-bottom: 20px;
  .title{
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
  }
  .answer{
    font-size: 14px;
    line-height: 1.4;
    padding: 10px 30px 0;
  }
}
</style>

 src/router/demo_router.js

@@ -28,6 +28,12 @@
      component: () => import('@/pages/demo/form'), // Parent router-view
      name: 'demoForm',
      meta: { title: '模板表单' }
    },
    {
      path: 'detail',
      component: () => import('@/pages/demo/detail'), // Parent router-view
      name: 'demoDetail',
      meta: { title: '模板详情' }
    }
  ]
}