ylrz_his_scrm_adminUI/src/views/hisStore/components/storeDetails.vue

<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      店铺详情
    </div>
    <div class="content" v-if="item!=null">
      <div class="desct">
        店铺信息
      </div>
      <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="店铺名称" >
          <span v-if="item!=null">{{item.storeName}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="店铺介绍" >
          <span v-if="item!=null">{{item.descs}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="店铺LOGO" >
          <el-image
            style="width: 100px"
            :src="item.logoUrl"
            :preview-src-list="[item.logoUrl]">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="地址" >
          <span v-if="item!=null">{{item.address}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="店铺电话" >
          <span v-if="item!=null">{{item.phone}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="资质证书">
          <el-image
            style="width: 100px"
            :src="item.licenseImages"
            :preview-src-list="[item.licenseImages]">
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="商品总数" >
          <span v-if="item!=null">{{item.productCount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="状态" >
          <dict-tag :options="statusOptions" :value="item.status"/>
        </el-descriptions-item>
        <el-descriptions-item label="销量" >
          <span v-if="item!=null">{{item.salesCount}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="余额" >
          <span v-if="item!=null">{{item.balance}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="累计金额" >
          <span v-if="item!=null">{{item.totalMoney}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="审核状态" >
          <dict-tag :options="isAuditOptions" :value="item.isAudit"/>
        </el-descriptions-item>
        <el-descriptions-item label="登录帐号" >
          <span v-if="item!=null">{{item.account}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" >
          <span v-if="item!=null">{{item.createTime}}</span>
        </el-descriptions-item>

        <el-descriptions-item label="更新时间" >
          <span v-if="item!=null">{{item.updateTime}}</span>
        </el-descriptions-item>



      </el-descriptions>
      <div v-if="item.isAudit===0" class="dialog">
        <el-divider content-position="left">审核</el-divider>
        <el-form ref="form1" :model="form1" :rules="rules1" label-width="80px">
          <el-form-item label="审核理由" prop="reason">
            <el-input v-model="form1.reason" type="textarea" placeholder="请输入审核理由" />
          </el-form-item>
          <el-form-item label="图片说明" prop="attachment">
            <ImageUpload  v-model="form1.attachImage" type="image" :limit=5 :width="150"
                          :height="150"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleUpdate(1)">审核通过</el-button>
          <el-button type="primary" @click="handleUpdate(-1)">审核退回</el-button>
        </div>
      </div>
      <div v-if="item.isAudit!==0" class="dialog">
        <el-divider content-position="left">审核记录</el-divider>
        <el-table :data="item.auditLogs" border >
          <el-table-column label="描述" align="center" prop="des" :show-overflow-tooltip="true" />
          <el-table-column label="操作人员" align="center" prop="operName" width="100" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
          <el-table-column label="操作日期" align="center" prop="operTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.operTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核理由" align="center" prop="reason" ></el-table-column>
          <el-table-column label="图片" align="center" prop="attachImage" width="100" >
            <template slot-scope="scope">
              <el-image
                style="width: 100px"
                :src="scope.row.attachImage"
                :preview-src-list="[scope.row.attachImage]"
                v-if="scope.row.attachImage">
              </el-image>
              <span v-else >无图片</span >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
import { audit, getStore, getStoreAuditLog } from '@/api/hisStore/store'
export default {
  name: "user",
  props:["data"],
  data() {
    return {
      statusOptions: [],
      // 审核状态字典
      isAuditOptions: [],
      item:null,
      logoUrl:[],
      form: {
        sreason: '',
      },
      form1: {},
      rules1: {
        auditReason: [
          { required: true, message: "审核理由不能为空", trigger: "blur" }
        ]
      },
    }
  },
  created() {
    this.getDicts("sys_company_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_company_isaudit").then(response => {
      this.isAuditOptions = response.data;
    });
  },
  destroyed() {
    this.item = null;
    this.form1 = {};
  },
  methods: {
    getDetails(orderId) {
      this.item = null;
      Promise.all([getStore(orderId), getStoreAuditLog(orderId)])
        .then(([storeResponse, auditResponse]) => {
          this.item = storeResponse.data;
          // 确保 item 不为 null 后再设置 auditLogs
          this.$set(this.item, 'auditLogs', auditResponse.auditLog);
        });
    },
    handleUpdate(oper) {
      let operStr = oper === 1 ? "审核通过" : "审核退回";
      this.$confirm("是否确认"+operStr+"店铺?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=> {
        let param = {}
        param.storeId = this.item.storeId;
        param.reason = this.form1.reason;
        param.attachImage = this.form1.attachImage;
        param.isAudit=oper;
        return audit(param);
      }).then(res => {
        if(res.code === 200){
          this.$message.success("审核成功");
          this.getDetails(this.item.storeId);
          this.$emit('fresh');
        }else{
          this.$message.error("审核失败",res.msg);
        }
      }).catch(function() {

      }).finally(()=>{
        this.form1.auditReason = null;
        this.form1.attachment = null;
      });
    },
  }
}
</script>
<style>
.content{
  height: 100%;
  background-color: #fff;
  padding: 0px 20px;
  padding-bottom: 20px;
  margin: 20px;
}
.el-descriptions-item__label.is-bordered-label{
  font-weight: normal;
}
.el-descriptions-item__content {
  max-width: 150px;
  min-width: 100px;
}
.desct{
  padding-top: 20px;
  padding-bottom: 20px;
  color: #524b4a;
  font-weight: bold;
}
</style>