smart-switch-ui/src/views/ss/storeApply/detail.vue

<template>
  <div v-loading="loading" style="padding: 1em">
    <el-row :gutter="12">
      <el-col :span="span">
        <el-card class="box-card" header="申请信息">
          <el-descriptions :column="2">
            <el-descriptions-item label="店铺">{{detail.storeName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="申请人">{{detail.userName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="提交时间">{{detail.createTime | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="申请类型">
              <dict-tag :options="dict.type.store_apply_type" :value="detail.applyType" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="申请状态">
              <dict-tag :options="dict.type.store_apply_status" :value="detail.status" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="审核时间">{{detail.verifyTime | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="审核人">{{detail.verifyName | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="审核意见">{{detail.verifyRemark | defaultValue}}</el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-card class="box-card" header="变更字段">
          <ul class="list-group list-group-striped" style="margin-top: 0">
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="店铺名称" prop="name" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="店铺图片" prop="picture" >
              <template #old="{value}">
                <image-preview :width="24" :height="24" :src="value"/>
              </template>
              <template #new="{value}">
                <image-preview :width="24" :height="24" :src="value"/>
              </template>
            </change-field>
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="地址" prop="address" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="经度" prop="lng" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="纬度" prop="lat" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="营业时间（起始）" prop="businessTimeStart" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="营业时间（结束）" prop="businessTimeEnd" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="省" prop="province" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="市" prop="city" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="区" prop="county" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="店铺类型" prop="type" >
              <template #old="{value}">
                <dict-tag :value="value" :options="dict.type.ss_store_type" size="small"/>
              </template>
              <template #new="{value}">
                <dict-tag :value="value" :options="dict.type.ss_store_type" size="small"/>
              </template>
            </change-field>
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="联系人" prop="contactName" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="联系电话" prop="contactMobile" />
            <change-field :new-data="detail.newData" :old-data="detail.oldData" label="是否展示" prop="show">
              <template #old="{value}">
                {{value ? '是' : '否'}}
              </template>
              <template #new="{value}">
                {{value ? '是' : '否'}}
              </template>
            </change-field>
          </ul>
        </el-card>
      </el-col>
      <el-col v-if="24 - span > 0" :span="24 - span">
        <el-card header="审核操作">
          <el-form :model="form" :rules="rules">
            <el-form-item label-width="0" prop="verifyRemark">
              <el-input v-model="form.verifyRemark" type="textarea" :rows="3" :maxlength="200" show-word-limit placeholder="请输入审核意见"/>
            </el-form-item>
          </el-form>
          <el-row type="flex" style="justify-content: center">
            <el-button type="success" plain icon="el-icon-check" @click="handleApproval(true)">通过</el-button>
            <el-button type="danger" plain icon="el-icon-close" @click="handleApproval(false)">驳回</el-button>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { approvalStoreApply, getStoreApply } from '@/api/ss/storeApply'
import { StoreApplyStatus } from '@/utils/constants'
import ChangeField from '@/views/ss/storeApply/component/ChangeField.vue'

export default {
  name: "StoreApplyDetail",
  components: { ChangeField },
  dicts: ['store_apply_type', 'store_apply_status', 'ss_store_type'],
  props: {
    id: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      loading: false,
      detail: {
        oldData: {},
        newData: {}
      },
      rules: {},
      form: {}
    }
  },
  computed: {
    span() {
      if (this.detail.status === StoreApplyStatus.WAIT_AUDIT) {
        return 14;
      }
      return 24;
    }
  },
  watch: {
    id(nv, ov) {
      this.getDetail(nv)
    }
  },
  created() {
    this.getDetail(this.id);
  },
  methods: {
    handleApproval(pass) {
      this.form.pass = pass;
      this.$confirm(`确定要${pass ? '通过' : '驳回'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        approvalStoreApply(this.form).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功")
            this.getDetail(this.id);
          }
        })
      })
    },
    getDetail(id) {
      this.loading = true;
      getStoreApply(id).then(res => {
        this.detail = res.data;
        this.reset();
      }).finally(() => {
        this.loading = false;
      })
    },
    reset() {
      this.form = {
        id: this.detail.id,
        verifyRemark: this.detail.verifyRemark,
        pass: null
      }
    }
  }
}
</script>