Herding_Hub/chenhai-ui/src/views/vet/product/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="产品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品类型" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请输入产品类型"
          clearable
        >
          <el-option
            v-for="dict in dict.type.medicine_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            @keyup.enter.native="handleQuery"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产品分类" prop="category">
        <el-select
          v-model="queryParams.category"
          placeholder="请输入产品分类"
          clearable
        >
          <el-option
            v-for="dict in dict.type.vet_product_category"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            @keyup.enter.native="handleQuery"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="生产厂家" prop="manufacturer">
        <el-input
          v-model="queryParams.manufacturer"
          placeholder="请输入生产厂家"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
        >
          <el-option
            v-for="dict in dict.type.sys_publish_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            @keyup.enter.native="handleQuery"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="auditStatus">
        <el-select
          v-model="queryParams.auditStatus"
          placeholder="请选择审核状态"
          clearable
        >
          <el-option
            v-for="dict in dict.type.audit_status.filter(item => item.value < 4)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            @keyup.enter.native="handleQuery"
          />
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="规格" prop="specification">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.specification"-->
      <!--          placeholder="请输入规格"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="单位" prop="unit">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.unit"-->
      <!--          placeholder="请输入单位"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->

      <!--      <el-form-item label="批准文号" prop="approvalNumber">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.approvalNumber"-->
      <!--          placeholder="请输入批准文号"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="销售价格" prop="price">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.price"-->
      <!--          placeholder="请输入销售价格"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="成本价" prop="costPrice">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.costPrice"-->
      <!--          placeholder="请输入成本价"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="库存数量" prop="stock">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.stock"-->
      <!--          placeholder="请输入库存数量"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="最低库存预警" prop="minStock">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.minStock"-->
      <!--          placeholder="请输入最低库存预警"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="治疗周期" prop="treatmentDuration">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.treatmentDuration"-->
      <!--          placeholder="请输入治疗周期"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="删除标识：0-正常/1-删除" prop="isDeleted">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.isDeleted"-->
      <!--          placeholder="请输入删除标识：0-正常/1-删除"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="诊所ID" prop="clinicId">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.clinicId"-->
      <!--          placeholder="请输入诊所ID"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="兽医ID" prop="vetId">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.vetId"-->
      <!--          placeholder="请输入兽医ID"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="创建时间" prop="createdAt">-->
      <!--        <el-date-picker clearable-->
      <!--                        v-model="queryParams.createdAt"-->
      <!--                        type="date"-->
      <!--                        value-format="yyyy-MM-dd"-->
      <!--                        placeholder="请选择创建时间">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="更新时间" prop="updatedAt">-->
      <!--        <el-date-picker clearable-->
      <!--                        v-model="queryParams.updatedAt"-->
      <!--                        type="date"-->
      <!--                        value-format="yyyy-MM-dd"-->
      <!--                        placeholder="请选择更新时间">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['vet:product:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['vet:product:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['vet:product:remove']"
        >删除</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['vet:product:export']"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <!--      <el-table-column label="主键ID" align="center" prop="id" />-->
      <el-table-column label="产品名称" align="center" prop="name" min-width="220" show-overflow-tooltip/>
      <el-table-column label="相关图片" align="center" prop="mainImage" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.mainImage" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="产品类型" align="center" prop="type" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="getTypeTagType(scope.row.type)"
            size="small"
          >
            {{ scope.row.type }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="产品分类" align="center" prop="category" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="getCategoryTagType(scope.row.category)"
            size="small"
          >
            {{ scope.row.category }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="规格" align="center" prop="specification" width="120"/>
      <!--      <el-table-column label="单位" align="center" prop="unit" />-->
      <el-table-column label="价格" align="center" prop="price" width="120" sortable>
        <template slot-scope="scope">
          <div class="price-cell">
            <div class="price-text" >¥{{ scope.row.price }}</div>
            <div class="cost-price">成本: ¥{{ scope.row.costPrice }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center" prop='stock' width="120" sortable>
        <template slot-scope="scope">
          <div class="stock-cell">
            <div class='stock-text'>
              <i class="el-icon-box"></i>
              {{ scope.row.stock }}
            </div>
            <div class="min-stock">预警: {{ scope.row.minStock }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="生产厂家" align="center" prop="manufacturer" width="150" show-overflow-tooltip/>
      <el-table-column label="产品状态" prop="status" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="getStatusTagType(scope.row.status)" size="small">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" prop="auditStatus" width="120" align="center">
        <template slot-scope="scope">
          <el-tag :type="getAuditStatusTagType(scope.row.auditStatus)" size="small">
            {{ getAuditStatusText(scope.row.auditStatus) }}
          </el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column label="批准文号" align="center" prop="approvalNumber" />-->
<!--      <el-table-column label="主要成分" align="center" prop="ingredients" />-->
<!--      <el-table-column label="适应症" align="center" prop="indications" />-->
<!--      <el-table-column label="用法用量" align="center" prop="usageDosage" />-->
<!--      <el-table-column label="销售价格" align="center" prop="price" />-->
<!--      <el-table-column label="成本价" align="center" prop="costPrice" />-->
<!--      <el-table-column label="库存数量" align="center" prop="stock" />-->
<!--      <el-table-column label="最低库存预警" align="center" prop="minStock" />-->
<!--      <el-table-column label="多张图片URL，JSON格式" align="center" prop="images" />-->
<!--      <el-table-column label="适用动物：如犬、猫、猪等" align="center" prop="treatAnimals" />-->
<!--      <el-table-column label="治疗疾病" align="center" prop="treatDiseases" />-->
<!--      <el-table-column label="治疗方案/内容" align="center" prop="treatmentContent" />-->
<!--      <el-table-column label="治疗周期" align="center" prop="treatmentDuration" />-->
<!--      <el-table-column label="注意事项" align="center" prop="precautions" />-->
<!--      <el-table-column label="状态：0-草稿/1-上架/2-下架" align="center" prop="status" />-->
<!--      <el-table-column label="删除标识：0-正常/1-删除" align="center" prop="isDeleted" />-->
<!--      <el-table-column label="诊所ID" align="center" prop="clinicId" />-->
<!--      <el-table-column label="兽医ID" align="center" prop="vetId" />-->
<!--      <el-table-column label="创建时间" align="center" prop="createdAt" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="更新时间" align="center" prop="updatedAt" width="180">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="300">
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['vet:product:edit']"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['vet:product:remove']"-->
<!--          >删除</el-button>-->
<!--        </template>-->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
            class="info-btn view-btn"
          >
            详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            style="color: #42B983"
            @click="handleUpdate(scope.row)"
            class="info-btn alter-btn"
            v-hasPermi="['vet:product:edit']"
            v-if="scope.row.status === '0' && (scope.row.auditStatus === '0' || scope.row.auditStatus === '3')"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color: #f56c6c"
            @click="handleDelete(scope.row)"
            class="info-btn delete-btn"
            v-hasPermi="['vet:product:remove']"
          >
            删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            style="color: #dab708"
            @click="handleSubmitAudit(scope.row)"
            class="info-btn submit-btn"
            v-hasPermi="['vet:product:submit']"
            v-if="scope.row.status === '0' && scope.row.auditStatus === '0'"
          >
            提交审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-top"
            style="color: #f46a0c"
            @click="handlePublish(scope.row)"
            class="info-btn publish-btn"
            v-hasPermi="['vet:product:publish']"
            v-if="scope.row.auditStatus === '2' && scope.row.status === '0'"
          >
            上架
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-bottom"
            style="color: #636361"
            @click="handleOffline(scope.row)"
            class="info-btn offline-btn"
            v-hasPermi="['vet:product:offline']"
            v-if="scope.row.status === '1'"
          >
            下架
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-close"
            style="color: #5607b3"
            @click="handleCancelAudit(scope.row)"
            class="info-btn cancel-btn"
            v-hasPermi="['vet:product:edit']"
            v-if="scope.row.status === '0' && scope.row.auditStatus === '1'"
          >
            取消审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-promotion"
            style="color: #c108af"
            @click="handleResubmitAudit(scope.row)"
            class="info-btn resubmit-btn"
            v-hasPermi="['vet:product:submit']"
            v-if="scope.row.status === '0' && scope.row.auditStatus === '3'"
          >
            重新提交
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagestyle">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 新增/修改弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="first">
            <el-row>
              <el-col :span="24">
                <el-form-item label="产品名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入产品名称" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="产品类型" prop="type">
                  <el-select v-model="form.type" placeholder="请选择产品类型" clearable>
                    <el-option v-for="dict in dict.type.medicine_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品分类" prop="category">
                  <el-select v-model="form.category" placeholder="请选择产品分类" clearable>
                    <el-option v-for="dict in dict.type.vet_product_category" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="生产厂家" prop="manufacturer">
                  <el-input v-model="form.manufacturer" placeholder="请输入生产厂家" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="批准文号" prop="approvalNumber">
                  <el-input v-model="form.approvalNumber" placeholder="请输入批准文号" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="相关图片" prop="mainImage">
              <image-upload v-model="form.mainImage"/>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="价格库存" name="second">
            <el-row>
              <el-col :span="12">
                <el-form-item label="销售价格" prop="price">
                  <el-input v-model="form.price" placeholder="请输入销售价格" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="成本价" prop="costPrice">
                  <el-input v-model="form.costPrice" placeholder="请输入成本价" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="库存数量" prop="stock">
                  <el-input v-model="form.stock" placeholder="请输入库存数量" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="库存预警" prop="minStock">
                  <el-input v-model="form.minStock" placeholder="请输入最低库存预警" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="产品详情" name="third">
            <el-row>
              <el-col :span="24">
                <el-form-item label="适用动物(如犬、猫)" prop="treatAnimals">
                  <el-input v-model="form.treatAnimals" type="textarea" placeholder="请输入内容" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="治疗疾病" prop="treatDiseases">
                  <el-input v-model="form.treatDiseases" type="textarea" placeholder="请输入内容" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="治疗方案/内容">
                  <editor v-model="form.treatmentContent" :min-height="192"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="治疗周期" prop="treatmentDuration">
                  <el-input v-model="form.treatmentDuration" placeholder="请输入治疗周期" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="注意事项" prop="precautions">
                  <el-input v-model="form.precautions" type="textarea" placeholder="请输入内容" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
<!--    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="产品名称" prop="name">-->
<!--          <el-input v-model="form.name" placeholder="请输入产品名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品类型" prop="type">-->
<!--          <el-select v-model="form.type" placeholder="请选择产品类型" clearable>-->
<!--            <el-option v-for="dict in dict.type.medicine_type" :key="dict.value" :label="dict.label" :value="dict.value" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="产品分类" prop="category">-->
<!--          <el-select v-model="form.category" placeholder="请选择产品分类" clearable>-->
<!--            <el-option v-for="dict in dict.type.vet_product_category" :key="dict.value" :label="dict.label" :value="dict.value" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="规格" prop="specification">-->
<!--          <el-input v-model="form.specification" placeholder="请输入规格" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="单位" prop="unit">-->
<!--          <el-input v-model="form.unit" placeholder="请输入单位" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="生产厂家" prop="manufacturer">-->
<!--          <el-input v-model="form.manufacturer" placeholder="请输入生产厂家" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="批准文号" prop="approvalNumber">-->
<!--          <el-input v-model="form.approvalNumber" placeholder="请输入批准文号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="主要成分" prop="ingredients">-->
<!--          <el-input v-model="form.ingredients" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="适应症" prop="indications">-->
<!--          <el-input v-model="form.indications" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用法用量" prop="usageDosage">-->
<!--          <el-input v-model="form.usageDosage" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="销售价格" prop="price">-->
<!--          <el-input v-model="form.price" placeholder="请输入销售价格" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="成本价" prop="costPrice">-->
<!--          <el-input v-model="form.costPrice" placeholder="请输入成本价" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="库存数量" prop="stock">-->
<!--          <el-input v-model="form.stock" placeholder="请输入库存数量" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="最低库存预警" prop="minStock">-->
<!--          <el-input v-model="form.minStock" placeholder="请输入最低库存预警" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="相关图片" prop="mainImage">-->
<!--          <image-upload v-model="form.mainImage"/>-->
<!--        </el-form-item>-->
<!--&lt;!&ndash;        <el-form-item label="多张图片URL，JSON格式" prop="images">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="form.images" type="textarea" placeholder="请输入内容" />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--        <el-form-item label="适用动物：如犬、猫、猪等" prop="treatAnimals">-->
<!--          <el-input v-model="form.treatAnimals" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="治疗疾病" prop="treatDiseases">-->
<!--          <el-input v-model="form.treatDiseases" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="治疗方案/内容">-->
<!--          <editor v-model="form.treatmentContent" :min-height="192"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="治疗周期" prop="treatmentDuration">-->
<!--          <el-input v-model="form.treatmentDuration" placeholder="请输入治疗周期" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="注意事项" prop="precautions">-->
<!--          <el-input v-model="form.precautions" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--&lt;!&ndash;        <el-form-item label="删除标识：0-正常/1-删除" prop="isDeleted">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="form.isDeleted" placeholder="请输入删除标识：0-正常/1-删除" />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="诊所ID" prop="clinicId">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="form.clinicId" placeholder="请输入诊所ID" />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="兽医ID" prop="vetId">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model="form.vetId" placeholder="请输入兽医ID" />&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="创建时间" prop="createdAt">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-date-picker clearable&ndash;&gt;-->
<!--&lt;!&ndash;                          v-model="form.createdAt"&ndash;&gt;-->
<!--&lt;!&ndash;                          type="date"&ndash;&gt;-->
<!--&lt;!&ndash;                          value-format="yyyy-MM-dd"&ndash;&gt;-->
<!--&lt;!&ndash;                          placeholder="请选择创建时间">&ndash;&gt;-->
<!--&lt;!&ndash;          </el-date-picker>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-form-item label="更新时间" prop="updatedAt">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-date-picker clearable&ndash;&gt;-->
<!--&lt;!&ndash;                          v-model="form.updatedAt"&ndash;&gt;-->
<!--&lt;!&ndash;                          type="date"&ndash;&gt;-->
<!--&lt;!&ndash;                          value-format="yyyy-MM-dd"&ndash;&gt;-->
<!--&lt;!&ndash;                          placeholder="请选择更新时间">&ndash;&gt;-->
<!--&lt;!&ndash;          </el-date-picker>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog title="产品详情" :visible.sync="detailViews" width="80%" append-to-body>
      <el-descriptions :column="4" border v-loading="detailLoading" >
        <el-descriptions-item label="产品名称" :span="4">
          {{ currentDetail.name || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品类型">
          {{ currentDetail.type || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="产品分类">
          {{ currentDetail.category || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="规格">
          {{ currentDetail.specification || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="单位">
          {{ currentDetail.unit || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="生产厂家" :span="2">
          {{ currentDetail.manufacturer || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="批准文号" :span="2">
          {{ currentDetail.approvalNumber || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="销售价格">
          {{ currentDetail.price || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="成本价">
          {{ currentDetail.costPrice || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="库存数量">
          {{ currentDetail.stock || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="最低库存预警">
          {{ currentDetail.minStock || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="适用动物" :span="2">
          {{ currentDetail.treatAnimals || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="治疗疾病" :span="2">
          {{ currentDetail.treatDiseases || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="主要成分" :span="4">
          {{ currentDetail.ingredients || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="适应症" :span="4">
          {{ currentDetail.indications || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="用法用量" :span="4">
          {{ currentDetail.usageDosage || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="治疗方案/内容" :span="4">
          <div v-html="currentDetail.treatmentContent || '--'"></div>
        </el-descriptions-item>
        <el-descriptions-item label="治疗周期" :span="4" >
          {{ currentDetail.treatmentDuration || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="注意事项" :span="4">
          {{ currentDetail.precautions || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">
          {{ currentDetail.createdAt || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间" :span="2">
          {{ currentDetail.updatedAt || '--' }}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailViews = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listProduct, getProduct, delProduct, addProduct, updateProduct, offlineProduct, publishProduct, submitAuditProduct, cancelAuditProduct, resubmitAuditProduct } from "@/api/vet/product"

export default {
  name: "Product",
  props: {
    shopId: {
      type: [Number, String],
      required: true
    }
  },
  dicts: ['medicine_type', 'vet_product_category', 'sys_publish_status', 'audit_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      detailLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 兽医产品信息分页参数
      activeName: 'first',
      // 步骤
      activeStep: 0,
      // 兽医产品信息表格数据
      productList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      detailViews: false,
      // 当前查看的详情
      currentDetail: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        type: null,
        category: null,
        specification: null,
        unit: null,
        manufacturer: null,
        approvalNumber: null,
        ingredients: null,
        indications: null,
        usageDosage: null,
        price: null,
        costPrice: null,
        stock: null,
        minStock: null,
        mainImage: null,
        images: null,
        treatAnimals: null,
        treatDiseases: null,
        treatmentContent: null,
        treatmentDuration: null,
        precautions: null,
        status: null,
        isDeleted: null,
        clinicId: null,
        vetId: null,
        createdAt: null,
        updatedAt: null,
        shopId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "产品名称不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "产品类型不能为空", trigger: "change" }
        ],
        category: [
          { required: true, message: "产品分类不能为空", trigger: "change" }
        ],
        price: [
          { required: true, message: "销售价格不能为空", trigger: "blur" },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的价格格式' }
        ],
        costPrice: [
          { required: true, message: "成本价不能为空", trigger: "blur" },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的价格格式' }
        ],
        stock: [
          { required: true, message: "库存数量不能为空", trigger: "blur" },
          { pattern: /^[0-9]*$/, message: '请输入正确的数字格式' }
        ],
        minStock: [
          { required: true, message: "最低库存预警不能为空", trigger: "blur" },
          { pattern: /^[0-9]*$/, message: '请输入正确的数字格式' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询兽医产品信息列表 */
    getList() {
      this.loading = true
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.activeStep = 0;
      this.form = {
        id: null,
        name: null,
        type: null,
        category: null,
        specification: null,
        unit: null,
        manufacturer: null,
        approvalNumber: null,
        ingredients: null,
        indications: null,
        usageDosage: null,
        price: null,
        costPrice: null,
        stock: null,
        minStock: null,
        mainImage: null,
        images: null,
        treatAnimals: null,
        treatDiseases: null,
        treatmentContent: null,
        treatmentDuration: null,
        precautions: null,
        status: null,
        isDeleted: null,
        clinicId: null,
        vetId: null,
        createdAt: null,
        updatedAt: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.detailViews = true;
      this.detailLoading = true;
      this.currentDetail = {};

      const id = row.id;
      getProduct(id).then(response => {
        if (response.code === 200) {
          this.currentDetail = response.data;
        } else {
          this.$modal.msgError("获取详情失败");
        }
        this.detailLoading = false;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加兽医产品信息"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getProduct(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改兽医产品信息"
      })
    },

    // // 上一步
    // prevStep() {
    //   this.activeStep--;
    // },
    // // 下一步
    // nextStep() {
    //   if (this.activeStep === 0) {
    //     this.$refs.form.validate(valid => {
    //       if (valid) this.activeStep++;
    //     });
    //     return;
    //   }
    // },
    // 提交表单
    // submitForm() {
    //   this.$refs.productForm.validate((valid) => {
    //     if (valid) {
    //       // 表单验证通过，提交数据
    //       this.$message.success("提交成功");
    //       // 这里写接口提交逻辑
    //       // this.$api.product.add(this.form).then(res => { ... })
    //       this.dialogVisible = false;
    //     } else {
    //       this.$message.error("请完善必填信息");
    //       return false;
    //     }
    //   });
    // },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateProduct(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addProduct(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除兽医产品信息编号为"' + ids + '"的数据项？').then(function() {
        return delProduct(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('vet/product/export', {
        ...this.queryParams
      }, `product_${new Date().getTime()}.xlsx`)
    },

    /** 获取产品类型标签类型 */
    getTypeTagType(type) {
      const map = {
        "处方药": 'danger',
        "非处方药": 'warning',
        "中成药": 'success',
        "保健品": 'primary'
      }
      return map[type] || ''
    },

    /** 获取产品分类标签类型 */
    getCategoryTagType(category) {
      const map = {
        "抗生素类": 'danger',
        "抗寄生虫类": 'warning',
        "疫苗类": 'success',
        "消毒剂类": 'primary',
        "营养补充类": 'info',
        "外科用药": 'success',
        "诊断试剂": 'warning',
        "中药制剂": 'danger'
      }
      return map[category] || ''
    },

    /** 获取状态文本 */
    getStatusText(status) {
      const map = {
        "0": '未上架',
        "1": '已上架'
      }
      return map[status] || status
    },

    /** 获取状态标签类型 */
    getStatusTagType(status) {
      const map = {
        "0": 'danger',
        "1": 'success'
      }
      return map[status] || ''
    },

    /** 获取审核状态文本 */
    getAuditStatusText(auditStatus) {
      const map = {
        "0": '待审核',
        "1": '审核中',
        "2": '审核通过',
        "3": '审核拒绝'
      }
      return map[auditStatus] || auditStatus
    },

    /** 获取审核状态标签类型 */
    getAuditStatusTagType(auditStatus) {
      const map = {
        "0": 'warning',
        "1": 'primary',
        "2": 'success',
        "3": 'danger'
      }
      return map[auditStatus] || ''
    },

    // 上架
    handlePublish(row) {
      publishProduct(row.id).then(response => {
        this.$modal.msgSuccess("上架成功")
        this.getList()
      }).catch(() => {
        this.$modal.msgError("上架失败")
      })
    },

    // 下架
    handleOffline(row) {
      offlineProduct(row.id).then(response => {
        this.$modal.msgSuccess("下架成功")
        this.getList()
      }).catch(() => {
        this.$modal.msgError("下架失败")
      })
    },

    // 提交审核
    handleSubmitAudit(row) {
      submitAuditProduct(row.id).then(response => {
        this.$modal.msgSuccess("提交审核成功")
        this.getList()
      }).catch(() => {
        this.$modal.msgError("提交审核失败")
      })
    },


    // 取消审核
    handleCancelAudit(row){
      cancelAuditProduct(row.id).then(response => {
        this.$modal.msgSuccess("取消审核成功")
        this.getList()
      }).catch(() => {
        this.$modal.msgError("取消审核失败")
      })
    },

    // 重新提交审核
    handleResubmitAudit(row){
      resubmitAuditProduct(row.id).then(response => {
        this.$modal.msgSuccess("重新提交审核成功")
        this.getList()
      }).catch(() => {
        this.$modal.msgError("重新提交审核失败")
      })
    }

  }
}
</script>

<style scoped>
::v-deep .el-descriptions-item__cell{
  width: 90px;

}
::v-deep .el-descriptions-row th{
  text-align: center !important;
}

::v-deep .pagestyle .el-input{
  width: auto !important;
}

::v-deep .pagestyle .pagination-container{
  background-color: #f8fafc;
}
</style>

<style lang="scss" scoped>
//表格价格、库存样式
.price-cell {
  .price-text {
    font-weight: bold;
    color: #f56c6c;
  }

  .cost-price {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
  }
}

.stock-cell {
  .stock-text {
    font-weight: bold;
  }

  .min-stock {
    font-size: 12px;
    color: #f88080;
    margin-top: 2px;
  }
}

// 操作按钮样式
.info-btn {
  padding: 6px 10px;
  border-radius: 4px;
  margin: 0 10px;
  transition: all 0.3s ease;
}

.view-btn:hover {
  background-color: rgb(216, 238, 248);
  transform: translateY(-1px);
}

.chat-btn:hover {
  background-color: rgb(225, 233, 246);
  transform: translateY(-1px);
}

.alter-btn:hover{
  background-color: rgb(230, 255, 238);
  transform: translateY(-1px);
}

.delete-btn:hover {
  background-color: rgba(245, 108, 108, 0.1);
  transform: translateY(-1px);
}

.submit-btn:hover {
  background-color: rgb(253, 250, 232);
  transform: translateY(-1px);
}

.publish-btn:hover {
  background-color: rgb(253, 238, 228);
  transform: translateY(-1px);
}

.offline-btn:hover {
  background-color: rgb(237, 237, 235);
  transform: translateY(-1px);
}

.cancel-btn:hover {
  background-color: rgb(244, 237, 251);
  transform: translateY(-1px);
}

.resubmit-btn:hover {
  background-color: rgb(248, 232, 250);
  transform: translateY(-1px);
}

// 新增/修改的弹窗
::v-deep .el-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  animation: dialogFadeIn 0.3s ease;
}

::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #42b983 0%, #83df92 100%);
  padding: 18px 24px;
  border-bottom: none;
  position: relative;
}

::v-deep .el-dialog__title {
  font-size: 17px;
  font-weight: 600;
  color: white;
  letter-spacing: 0.5px;
}

::v-deep .el-dialog__headerbtn:hover .el-dialog__close {
  color: #ffd04b;
  transform: rotate(90deg);
}

::v-deep .el-dialog__body {
  padding: 28px 24px 20px;
  background-color: #f8fafc;
  max-height: 70vh;
  overflow-y: auto;
}

::v-deep .el-form-item {
  margin-bottom: 20px;
  transition: all 0.3s;
}

::v-deep .el-form-item__label {
  font-weight: 500;
  color: #2d3748;
  font-size: 14px;
  transition: color 0.3s;
}

::v-deep .el-input,
::v-deep .el-textarea,
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-input__inner,
::v-deep .el-textarea__inner {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  transition: all 0.3s;
  background-color: #fcfdfe;
}

::v-deep .el-input__inner:focus,
::v-deep .el-textarea__inner:focus {
  border-color: #42B983;
  box-shadow: 0 0 0 3px rgb(230, 255, 238);
  background-color: white;
}

::v-deep .el-select .el-input__inner {
  padding-right: 35px;
}

::v-deep .el-dialog__footer {
  padding: 20px 24px;
  background-color: #f8fafc;
  border-top: 1px solid #eef2f7;
  border-radius: 0 0 12px 12px;
}
</style>