library-management-system/src/views/visualCheck/checkManage/checkLog/index.vue

<template>
  <div class="app-container  row-container">
    <div class="head-container">
      <div class="head-search">
        <!-- 搜索 -->
        <el-select v-model="query.stockStatus" clearable size="small" placeholder="盘点状态" class="filter-item" style="width: 120px" @change="crud.toQuery">
          <i slot="prefix" class="iconfont icon-zhuangtai" />
          <el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <el-select v-model="query.stockType" clearable size="small" placeholder="盘点类型" class="filter-item" style="width: 120px" @change="crud.toQuery">
          <i slot="prefix" class="iconfont icon-zhuangtai" />
          <el-option v-for="item in TypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
        </el-select>
        <date-range-picker v-model="blurryTime" class="date-item" />
        <el-input v-model="query.search" clearable size="small" placeholder="输入单号/备注关键字搜索" prefix-icon="el-icon-search" style="width: 220px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <template v-slot:middle>
          <el-button v-permission="permission.add" class="check-btn" size="mini" @click="crud.toAdd">
            <i class="iconfont icon-shengchengpandiandan" />
            全量盘点
          </el-button>
        </template>
      </crudOperation>
    </div>
    <div class="container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <el-table
        ref="table"
        v-loading="crud.loading"
        class="archives-table"
        :data="crud.data"
        style="width: 100%;"
        height="calc(100vh - 329px)"
        @selection-change="crud.selectionChangeHandler"
        @row-click="clickRowHandler"
        @row-dblclick="handleDbClick"
      >
        <el-table-column prop="stockBill" label="盘点单号" />
        <el-table-column prop="stockType" label="盘点类型">
          <template slot-scope="scope">
            <span v-if="scope.row.stockType===1">全量盘点</span>
            <span v-if="scope.row.stockType===2">区域盘点</span>
            <span v-if="scope.row.stockType===3">计划盘点</span>
            <span v-if="scope.row.stockType===4">书架盘点</span>
            <span v-if="scope.row.stockType===5">架位盘点</span>
            <span v-if="scope.row.stockType===6">层位盘点</span>
            <span v-if="scope.row.stockType===7">移动盘点</span>
          </template>
        </el-table-column>
        <el-table-column prop="stockRegion" label="目标位置" min-width="180" />
        <el-table-column prop="stockGridNum" label="目标数量">
          <template slot-scope="scope">
            <div>{{ scope.row.stockGridNum + ' / '+ (scope.row.totalGridNum?scope.row.totalGridNum:'0') +' 层位' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="stockRemarks" label="备注">
          <template slot-scope="scope">
            <div v-if="scope.row.stockRemarks !== null">{{ scope.row.stockRemarks }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="盘点开始时间">
          <template slot-scope="scope">
            <div v-if="scope.row.startTime !== null">{{ scope.row.startTime | parseTime }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="盘点结束时间">
          <template slot-scope="scope">
            <div v-if="scope.row.endTime !== null">{{ scope.row.endTime | parseTime }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="盘点状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span>
            <span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span>
            <span v-if="scope.row.state === 2" class="row-state row-binding state-active">盘点中</span>
            <span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination v-if="crud.data.length!==0" />
    </div>

    <!-- form -->
    <el-dialog :class="unreachable.length !== 0 ? 'stock-dialog':''" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog" style="display: flex; justify-content: flex-start;">
        <div :style=" {'width': unreachable.length !== 0 ? '670px':''}">
          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
            <el-form-item label="盘点单号" prop="stockBill">
              <el-input v-model="form.stockBill" disabled />
            </el-form-item>
            <el-form-item label="盘点类型" prop="stockTypeName">
              <el-input v-model="form.stockTypeName" disabled />
            </el-form-item>
            <el-form-item label="目标位置" prop="stockRegion">
              <el-input v-model="form.stockRegion" disabled />
            </el-form-item>
            <el-form-item
              class="stockGridNumName-style"
              label="目标数量"
              prop="stockGridNumName"
            >
              <span v-if="stockInfoLoading" class="el-icon-loading" />
              <!-- <el-input v-else disabled v-html="form.stockGridNumName" /> -->
              <div v-else style="display: flex; justify-content: flex-start;">
                <el-input disabled v-html="form.stockGridNumName" />
                <el-popover
                  class="stock-popover"
                  placement="top-start"
                  width="250"
                  trigger="hover"
                >
                  <div>
                    <span style="display:block; font-weight: bold; margin-bottom: 10px;">A / B / C 层位 </span>
                    A：开启盘点功能 且 当前可盘点 层位数量<br>
                    B：开启盘点功能 且 当前不可盘点 层为数量<br>
                    C：具备盘点功能的 层位数量
                  </div>
                  <i slot="reference" class="iconfont icon-zhuyi-lan" />
                </el-popover>
              </div>
            </el-form-item>
            <el-row>
              <el-form-item label="备注" prop="stockRemarks">
                <el-input v-model="form.stockRemarks" type="textarea" style="width: 572px;" :rows="4" />
              </el-form-item>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="padding-right: 20px;">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :disabled="isBtnDisabled" :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
          </div>
        </div>
        <div v-if="unreachable.length !== 0" style="width: 500px; margin-left: 10px;">
          <div class="stock-info-tips">
            <p>注意：系统检查到，有参与本次盘点的摄像头无法连接！仅<i>{{ reachable.length }}</i>/个层架位可盘点。</p>
            <span>不可盘点具体情况如下：</span>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <el-card class="box-card">
              <div slot="header">
                <span>无法连接的摄像头（  <i style="color: #f53f3f; font-weight: bold; font-style: normal;">{{ ipStatusFalseNum }}</i> /个)</span>
              </div>
              <div v-for="(item,index) in ipStatusFalse" :key="index" class="stock-info-item">
                <span> {{ item.ip }} </span>
              </div>
            </el-card>
            <el-card class="box-card">
              <div slot="header">
                <span>无法盘点的层架位（ <i style="color: #f53f3f; font-weight: bold; font-style: normal;">{{ unreachable.length }}</i>   /个）</span>
              </div>
              <div v-for="(item,index) in unreachable" :key="index" class="stock-info-item">
                <span> {{ item.gridName }} </span>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog class="detailBook" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="detailVisible" title="盘点详情">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <div class="detail-tab tab-content">
          <ul class="tab-nav">
            <li :class="{'active-tab-nav': tabIndex === 0}" @click="changeDetailTab(0)">基础信息</li>
            <li :class="{'active-tab-nav': tabIndex === 1}" @click="changeDetailTab(1)">层位盘点信息</li>
          </ul>
          <el-button v-if="detailInfo.state === 3" style="position: absolute; right: 0; top: -10px;" size="mini" @click="doExport(detailInfo)">
            <i class="iconfont icon-daochu" />
            导出
          </el-button>
          <div v-if="tabIndex===0" class="detail-check">
            <ul class="book-detail">
              <li><span>盘点单号：</span>{{ detailInfo.stockBill }}</li>

              <li v-if="detailInfo.stockType===1"><span>盘点类型：</span>全量盘点</li>
              <li v-if="detailInfo.stockType===2"><span>盘点类型：</span>区域盘点</li>
              <li v-if="detailInfo.stockType===3"><span>盘点类型：</span>计划盘点</li>
              <li v-if="detailInfo.stockType===4"><span>盘点类型：</span>书架盘点</li>
              <li v-if="detailInfo.stockType===5"><span>盘点类型：</span>架位盘点</li>
              <li v-if="detailInfo.stockType===6"><span>盘点类型：</span>层位盘点</li>
              <li v-if="detailInfo.stockType===7"><span>盘点类型：</span>移动盘点</li>

              <li><span>目标位置：</span>{{ detailInfo.stockRegion }}</li>
              <li><span>目标数量：</span>{{ detailInfo.stockGridNum }} / {{ detailInfo.totalGridNum }} 层位</li>

              <li v-if="detailInfo.stockRemarks !== null" class="row-li"><span>备注：</span>{{ detailInfo.stockRemarks }}</li>
              <li v-else class="row-li"><span>备注：</span>-</li>

              <li v-if="detailInfo.startTime !== null"><span>开始时间：</span>{{ detailInfo.startTime | parseTime }}</li>
              <li v-else><span>开始时间：</span>-</li>

              <li v-if="detailInfo.endTime !== null"><span>结束时间：</span>{{ detailInfo.endTime | parseTime }}</li>
              <li v-else><span>结束时间：</span>-</li>
              <li class="row-li" style="margin-left: 30px;">
                <i v-if="detailInfo.state === 0" class="row-state cancel-state">已终止</i>
                <i v-if="detailInfo.state === 1" class="row-state  soon-state">排队中</i>
                <i v-if="detailInfo.state === 2" class="row-state end-state">盘点中</i>
                <i v-if="detailInfo.state === 3" class="row-state ing-state">已完成</i>
              </li>
            </ul>
            <div class="detail-other">
              <ul class="book-detail">
                <li class="row-li"><span>在架图书：</span><p><i style=" font-weight: bold;">{{ detailInfo.onShelfNum }}</i> / 册</p></li>
                <li><span>错架图书：</span><p><i style="color:#ED4A41; font-weight: bold;">{{ detailInfo.errorShelfNum }}</i> / 册</p></li>
                <li><span>错架率：</span><p style="color:#ED4A41; font-weight: bold;">{{ detailInfo.errorShelfProba }}</p></li>
                <li><span>错序图书：</span><p><i style="color:#0348f3; font-weight: bold;">{{ detailInfo.errorOrderNum }}</i> / 册</p></li>
                <li><span>错序率：</span><p style="color:#0348f3; font-weight: bold;">{{ detailInfo.errorOrderProba }}</p></li>
              </ul>
              <!-- 图表部分 -->
              <div style="width: 60%; height: 140px;">
                <taskStockLogEcharts :task-stock-log-data="taskStockLogData" />
              </div>
            </div>
          </div>
          <div v-if="tabIndex===1">
            <el-table
              ref="table"
              v-loading="gridTableLoading"
              class="archives-table"
              :data="detailTable"
              style="width: 100%;"
            >
              <el-table-column prop="gridName" label="层位架" min-width="180" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  {{ scope.row.gridName | removeQUPrefix }}
                </template>
              </el-table-column>
              <el-table-column prop="floorName" label="楼层" />
              <el-table-column prop="regionName" label="区域" min-width="120" />
              <el-table-column prop="booksheflCount" label="盘点详情" min-width="280" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <ul class="detail-table-info">
                    <li><span>在架：</span><p><i>{{ scope.row.onShelfNum }}</i> / 册</p> </li>
                    <li><span>错架：</span><p><i style="color:#ED4A41;">{{ scope.row.errorShelfNum }}</i> / 册</p> </li>
                    <li><span>错序：</span><p><i style="color:#0348f3;">{{ scope.row.errorOrderNum }}</i> / 册</p> </li>
                  </ul>
                </template>
              </el-table-column>
              <el-table-column prop="progress" label="进度" min-width="120" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ scope.row.progress !== null ? scope.row.progress : '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="detailsRemarks" label="备注" min-width="100" :show-overflow-tooltip="true" />
              <el-table-column prop="state" label="状态" width="80">
                <template slot-scope="scope">
                  <span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span>
                  <span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span>
                  <span v-if="scope.row.state === 2" class="row-state row-binding state-active">盘点中</span>
                  <span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-if="detailTable.length !== 0"
              :page-size.sync="detailPage.size"
              :total="detailPage.total"
              :current-page.sync="detailPage.page"
              style="margin-top: 8px;"
              :pager-count="5"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentPage"
            />
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- 排队中会多一个“删除盘点”  进行中的多一个“终止盘点” -->
          <el-button v-if="detailInfo.state === 1" :loading="crud.delAllLoading" type="primary" class="end-btn" @click="toDelete"><i class="iconfont icon-stop" />删除盘点</el-button>
          <el-button v-if="detailInfo.state === 2" :loading="stopLoading" type="primary" class="end-btn" @click="toStopStockBill"><i class="iconfont icon-stop" />终止盘点</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="detailVisible=false">确定</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import crudStockTaskLog from '@/api/stockTaskLog/index'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import taskStockLogEcharts from '@/views/components/echarts/taskStockLog.vue'
import DateRangePicker from '@/components/DateRangePicker'
import { mapGetters } from 'vuex'
import { parseTime, saveAs, getBlob } from '@/utils/index'
import qs from 'qs'

const defaultForm = { stockTypeName: '全量盘点', stockType: 1, stockBill: null, stockRegion: '全部区域', stockGridNum: null, stockGridNumName: null, totalGridNum: null, stockRemarks: null, regionId: null, shelfId: null, gridShelf: null, gridId: null, reableGridIds: [], unReableGridIds: [] }
export default {
  name: 'CheckLog',
  components: { crudOperation, rrOperation, pagination, taskStockLogEcharts, DateRangePicker },
  cruds() {
    return CRUD({ title: '盘点日志', idField: 'billId', url: 'api/stocktask-task/initStockLogList', crudMethod: { ...crudStockTaskLog }, sort: [], optShow: {
      add: false,
      edit: false,
      del: false,
      download: false,
      group: false,
      reset: false
    }})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      statusOptions: [
        { key: 0, display_name: '已终止' },
        { key: 1, display_name: '排队中' },
        { key: 2, display_name: '盘点中' },
        { key: 3, display_name: '已完成' }
      ],
      TypeOptions: [
        { key: 1, display_name: '全量盘点' },
        { key: 2, display_name: '区域盘点' },
        { key: 3, display_name: '计划盘点' },
        { key: 4, display_name: '书架盘点' },
        { key: 5, display_name: '架位盘点' },
        { key: 6, display_name: '层位盘点' },
        { key: 7, display_name: '移动盘点' }
      ],
      blurryTime: null,
      tabIndex: 0,
      detailVisible: false,
      stopLoading: false,
      dbRowData: {},
      detailInfo: {},
      taskStockLogData: [],
      gridTableLoading: false,
      detailPage: {
        page: 1,
        size: 10,
        total: 0
      },
      detailTable: [],
      permission: {
        add: ['admin', 'checkLog:add'],
        edit: ['admin', 'checkLog:edit'],
        del: ['admin', 'checkLog:del']
      },
      rules: {
        stockBill: [
          { required: true, message: '请输入盘点单号', trigger: 'blur' }
        ],
        stockTypeName: [
          { required: true, message: '请输入盘点类型', trigger: 'blur' }
        ],
        stockRegion: [
          { required: true, message: '请输入目标位置', trigger: 'blur' }
        ],
        stockGridNumName: [
          { required: true, message: '请输入目标数量', trigger: 'blur' }
        ]
      },
      stockInfo: null,
      ipStatusList: [],
      ipStatusFalseNum: 0,
      unreachable: [],
      reachable: [],
      isBtnDisabled: true,
      stockInfoLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ])
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      if (this.blurryTime) {
        this.crud.query.startTime = this.blurryTime[0]
        this.crud.query.endTime = this.blurryTime[1]
      } else {
        this.crud.query.startTime = null
        this.crud.query.endTime = null
      }
    },
    [CRUD.HOOK.afterRefresh](crud) {
      this.isBtnDisabled = true
      this.stockInfoLoading = false
    },
    // 新增前
    [CRUD.HOOK.beforeToAdd]() {
      let params
      if (this.crud.form.stockType === 1) {
        this.crud.form.stockTypeName = '全量盘点'
        params = {
          'gridShelf': null,
          'regionId': null,
          'shelfId': null
        }
      }

      this.stockInfoLoading = true
      const stockInfoPromise = crudStockTaskLog.FetchStockGirdSuccess()
        .then(stockInfo => {
          this.stockInfoLoading = false
          return stockInfo
        })
        .catch(error => {
          this.stockInfoLoading = false
          console.error('stockInfo 接口失败:', error)
          throw error
        })

      const otherPromises = [
        crudStockTaskLog.FetchNewBillNo(),
        crudStockTaskLog.FetchStockGirdNum(),
        crudStockTaskLog.FetchTotalGirdNum(params)
      ]

      Promise.all([stockInfoPromise, ...otherPromises])
        .then(([stockInfo, newBillNoRes, stockGridNumRes, totalGirdNumRes]) => {
          console.log('stockInfo', stockInfo)
          this.stockInfo = stockInfo

          const ipStatusList = stockInfo
            ? Object.entries(stockInfo.ipReachableCache).map(([ip, status]) => ({ ip, status }))
            : []
          this.ipStatusList = ipStatusList
          this.ipStatusFalse = this.ipStatusList.filter(item => !item.status)
          this.ipStatusFalseNum = this.ipStatusList.filter(item => !item.status).length
          this.reachable = stockInfo.reachable
          this.unreachable = stockInfo.unreachable
          // 测试
          // this.reachable = stockInfo.unreachable
          // this.unreachable = []

          if (stockInfo && this.reachable.length !== 0) {
            this.isBtnDisabled = false
          } else {
            this.isBtnDisabled = true
          }

          this.crud.form.stockBill = newBillNoRes
          this.crud.form.stockGridNumName = stockInfo
            ? `<span style="color: #00b42a;">${this.reachable.length}</span> / 
           <span style="color: #f53f3f;">${this.unreachable.length}</span> / 
           ${totalGirdNumRes} 层位`
            : '数据加载失败'
          this.crud.form.stockGridNum = stockGridNumRes
          this.crud.form.totalGridNum = totalGirdNumRes
        })
        .catch(error => {
          console.error('整体请求失败:', error)
          this.isBtnDisabled = true
        })
    },
    [CRUD.HOOK.afterAddCancel]() {
      this.isBtnDisabled = true
      this.stockInfoLoading = false
    },
    // 初始化编辑时
    [CRUD.HOOK.beforeToEdit](crud, form) {
    },
    [CRUD.HOOK.beforeValidateCU](crud, form) {
    },
    // 提交前做的操作
    [CRUD.HOOK.afterValidateCU](crud) {
      console.log(crud.form)
      crud.form.reableGridIds = this.reachable.map(item => item.gridId)
      crud.form.unReableGridIds = this.unreachable.map(item => item.gridId)
      delete crud.form.stockGridNumName
      delete crud.form.stockTypeName
      return true
    },
    clickRowHandler(row) {
      // this.$refs.table.clearSelection()
      // this.$refs.table.toggleRowSelection(row)
    },
    doExport(data) {
      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const params = {
          'billId': data.id
        }
        const fileName = '盘点单-' + parseTime(new Date()) + '.xlsx'
        getBlob(this.baseApi + '/api/stocktask-task/exportStockBill' + '?' + qs.stringify(params, { indices: false }), function(blob) {
          saveAs(blob, fileName)
        })
      }).catch(() => {
      })
    },
    handleDbClick(row) {
      this.tabIndex = 0
      this.detailVisible = true
      this.dbRowData = row
      this.detailTable = []
      crudStockTaskLog.FetchInitStockLogDetails({ 'billId': row.billId }).then(res => {
        this.detailInfo = res

        this.taskStockLogData = [
          { value: res.onShelfNum - res.errorShelfNum - res.errorOrderNum, name: '正常在架' },
          { value: res.errorShelfNum, name: '错架' },
          { value: res.errorOrderNum, name: '错序' }
        ]
      }).catch(() => {
      })
    },
    changeDetailTab(index) {
      this.tabIndex = index
      if (index === 1) {
        this.getInitStockTaskDetails()
      }
    },
    getInitStockTaskDetails() {
      this.gridTableLoading = true
      const params = {
        'billId': this.dbRowData.billId,
        'page': this.detailPage.page - 1,
        'size': this.detailPage.size
      }
      crudStockTaskLog.FetchInitStockTaskDetails(params).then(res => {
        if (res) {
          if (this.dbRowData.state === 2) {
            const progressPromises = res.content.map(item => {
              const paramsProgress = {
                'stockBill': this.dbRowData.stockBill,
                'gridCode': item.gridCode
              }
              return crudStockTaskLog.FetchProgressByStockBillAndGridCode(paramsProgress)
            })

            Promise.all(progressPromises).then(progressResults => {
              this.detailTable = res.content.map((item, index) => {
                item.progress = progressResults[index]
                return item
              })

              this.gridTableLoading = false
            }).catch(error => {
              console.error(error)
              this.gridTableLoading = false
            })
          } else {
            this.detailTable = res.content.map((item, index) => {
              item.progress = this.dbRowData.state === 0 ? '已终止' : (this.dbRowData.state === 1 ? '排队中' : '已完成')
              return item
            })
            this.gridTableLoading = false
          }
          this.detailPage.total = res.totalElements
        }
      }).catch(() => {
        this.gridTableLoading = false
      })
    },
    handleSizeChange(size) {
      this.detailPage.size = size
      this.detailPage.page = 1
      this.tabIndex = 1
      this.getInitStockTaskDetails()
    },
    handleCurrentPage(val) {
      this.detailPage.page = val
      this.tabIndex = 1
      this.getInitStockTaskDetails()
    },
    handleCloseDialog() {
      this.detailVisible = false
      this.tabIndex = 0
      this.isBtnDisabled = true
      this.stockInfoLoading = false
    },
    toDelete() {
      this.$confirm('此操作将删除当前盘点单任务<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.crud.delAllLoading = true
        const params = {
          'id': this.dbRowData.billId
        }
        console.log(params)
        crudStockTaskLog.del(params).then(res => {
          console.log(res)
          if (res && res.code !== 500) {
            this.$message({ message: '当前盘点单任务删除成功', type: 'success', offset: 8 })
            this.crud.refresh()
          } else {
            this.$message({ message: res.message, type: 'error', offset: 8 })
          }
          this.handleCloseDialog()
          this.crud.delAllLoading = false
        }).catch(err => {
          this.crud.delAllLoading = false
          console.log(err)
        })
      }).catch(() => {
        this.crud.delAllLoading = false
      })
    },
    toStopStockBill() {
      this.$confirm('此操作将终止当前盘点单任务<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.stopLoading = true
        const params = {
          'id': this.dbRowData.billId
        }
        crudStockTaskLog.FetchStopStockBill(params).then(res => {
          console.log(res)
          if (res && res.code !== 500) {
            this.$message({ message: '当前盘点单任务终止成功', type: 'success', offset: 8 })
            this.crud.refresh()
          } else {
            this.$message({ message: res.message, type: 'error', offset: 8 })
          }
          this.handleCloseDialog()
          this.stopLoading = false
        }).catch(err => {
          console.log(err)
          this.stopLoading = false
        })
      }).catch(() => {
        this.stopLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detailBook {
  ::v-deep .el-dialog {
    width: 1000px !important;
    .el-dialog__body{
      padding: 0 0 30px 0;
    }
  }
  .detail-check{
    padding: 20px 30px;
    background-color: #F6F8FC;
  }
  .book-detail{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li{
      width: 50%;
      line-height: 40px;
      span{
        display: inline-block;
        width: 100px;
        text-align: right;
        margin-right: 20px;
        color: #0C0E1E;
      }
      i{
        font-style: normal;
        padding: 0 8px;
      }
      &.row-li{
        width: 100%
      }
    }
  }
  .end-btn{
    width: auto !important;
    padding: 0 10px;
    border-color:  #ED4A41;
    background-color: #ED4A41;
  }
  .detail-other{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid #edeff3;
    padding-top: 20px;
    margin-top: 20px;
    .book-detail{
      width: 50%;
      li{
        display: flex;
        justify-content: flex-start;
        // width: 50%;
        span{
          display: block;
          width: 100px;
          text-align: right;
          margin-right: 0;
        }
        p{
          width: 100px;
          text-align: right;
          i{
            padding: 0;
          }
        }
      }

    }
  }
  ::v-deep .dialog-footer{
    margin-top: 30px;
  }
  .archives-table td.el-table__cell .row-state{
    margin: 0 !important;
  }
}

.detail-table-info{
  display: flex;
  justify-content: flex-start;
  li{
    width: calc(100% / 3);
    margin-right: 15px;
    span{
      display: inline-block;
      width: 40px;
      text-align: right;
    }
    p{
      display: inline-block;
      text-align: right;
      width: calc(100% - 40px);
      i{
        font-weight: bold;
        font-style: normal;
      }
    }
  }
}

.stock-dialog{
  ::v-deep .el-dialog{
    width: 1220px !important;
  }
}
.stockGridNumName-style{
  ::v-deep .el-form-item__content{
    width: auto !important;
    padding: 0 10px;
    .stock-popover{
      display: inline-block;
      margin-left: 6px;
      color: #0348f3;
    }
  }
}
.stock-info-tips{
  line-height: 24px;
  margin-bottom: 20px;
  p{
    color: #0c0e1e;
    i{
      display: inline-block;
      padding: 0 4px;
      font-weight: bold;
      font-style: normal;
      color: #00b42a;
    }
  }
  span{
    display: block;
  }
}
::v-deep .el-card {
  flex: 1;
  margin-right: 15px;
  .el-card__header{
    color: #0c0e1e;
    // font-size: 16px;
    background-color: #fff !important;
    border-bottom: 1px solid #ebeef5 !important;
  }
  .el-card__body{
    height: 180px;
    overflow: hidden;
    overflow-y: scroll;
  }
  .stock-info-item{
    display: flex; justify-content: space-between; padding: 4px 20px;
    span{
      display: block;
      height: 26px;
      line-height: 26px;
    }
  }
}
</style>