Browse Source

Merge commit 'faa425eb5e0c9cf4f794bb097ed61596f78ff57b' into HEAD

gitadmin 2 months ago
parent
commit
e06848b14e

+ 1 - 1
.env.practice

@@ -1,6 +1,6 @@
 NODE_ENV=production
 VUE_APP_PREVIEW=false
-VUE_APP_API_BASE_URL=https://t.it.360arrow.com/qpls-it
+VUE_APP_API_BASE_URL=http://192.168.2.100:92/qpls-it
 VUE_APP_VERSION=V1.0.1
 VUE_APP_ENVTIPS=练习环境
 VUE_APP_PRO_NAME=箭冠汽配IT系统

+ 37 - 0
src/api/vinPartLog.js

@@ -0,0 +1,37 @@
+import { axios } from '@/utils/request'
+
+//  vin日报 列表  分页
+export const vinPartLogDayList = (params) => {
+  const url = `/vinPartLog/queryCountByDay/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+
+//  vin月报 列表  分页
+export const vinPartLogMonthList = (params) => {
+  const url = `/vinPartLog/queryCountByMonth/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+
+//  vin扫码记录 列表  分页
+export const vinPartLogRecordList = (params) => {
+  const url = `/vinPartLog/queryPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}

+ 44 - 2
src/config/router.config.js

@@ -161,6 +161,49 @@ export const asyncRouterMap = [
           }
         ]
       },
+      // vin报表
+      {
+        path: '/vinReportDetails',
+        redirect: '/vinReport/vinReportDetails',
+        component: PageView,
+        meta: {
+          title: 'VIN管理',
+          icon: 'fund',
+          permission: 'M_vinReportDayList'
+        },
+        children: [
+          {
+            path: '/vinReportDetails/dayReportList',
+            name: 'dayReportList',
+            component: () => import(/* webpackChunkName: "vinReport" */ '@/views/vinReport/vinReportDetails/dayReportList.vue'),
+            meta: {
+              title: 'VIN查询日报',
+              icon: 'project',
+              permission: 'M_vinReportDayList'
+            }
+          },
+          {
+            path: '/vinReportDetails/monthReportList',
+            name: 'monthReportList',
+            component: () => import(/* webpackChunkName: "vinReport" */ '@/views/vinReport/vinReportDetails/monthReportList.vue'),
+            meta: {
+              title: 'VIN查询月报',
+              icon: 'project',
+              permission: 'M_vinReportMonthList'
+            }
+          },
+          {
+            path: '/vinReportDetails/recordList',
+            name: 'recordList',
+            component: () => import(/* webpackChunkName: "vinReport" */ '@/views/vinReport/vinReportDetails/recordList.vue'),
+            meta: {
+              title: 'VIN查询明细',
+              icon: 'project',
+              permission: 'M_vinReportRecordList'
+            }
+          }
+        ]
+      },
       // APP设置
       {
         path: '/appSetting',
@@ -339,8 +382,7 @@ export const asyncRouterMap = [
           {
             path: '/setting/equipmentManagement',
             name: 'equipmentManagement',
-            component: () => import(/* webpackChunkName: "setting" */
-              '@/views/power/equipment/equipmentManagement.vue'),
+            component: () => import(/* webpackChunkName: "setting" */ '@/views/power/equipment/equipmentManagement.vue'),
             meta: {
               title: '设备管理',
               icon: 'read',

+ 172 - 0
src/views/vinReport/vinReportDetails/dayReportList.vue

@@ -0,0 +1,172 @@
+<template>
+  <a-card size="small" :bordered="false" class="approveStore-wrap">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <!-- 搜索条件 -->
+      <div ref="tableSearch" class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+          <a-row :gutter="15">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="日期">
+                <rangeDate ref="rangeDate" v-model="time" @change="dateChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="经销商">
+                <storeList ref="storeList" @change="custChange"></storeList>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <div>
+                <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="approveStore-refresh">查询</a-button>
+                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="approveStore-reset">重置</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 列表 -->
+      <s-table
+        class="sTable fixPagination"
+        ref="table"
+        :style="{ height: tableHeight+84.5+'px' }"
+        size="small"
+        :rowKey="(record) => record.no"
+        rowkeyName="no"
+        :columns="columns"
+        :data="loadData"
+        :scroll="{ y: tableHeight }"
+        :defaultLoadData="false"
+        bordered>
+        <!-- 数量-->
+        <template slot="countVal" slot-scope="text, record">
+          <a-button class="button-info" type="link" @click="handleDetail(record)" id="approveStore-refresh">{{ record.queryCount||record.queryCount==0? record.queryCount:'--' }}</a-button>
+        </template>
+      </s-table>
+    </a-spin>
+    <!-- 数量 -->
+    <recordModal ref="recordModal" :openModal="openRecordModal" @close="openRecordModal=false" />
+  </a-card>
+</template>
+
+<script>
+// 组件
+import { STable, VSelect } from '@/components'
+import rangeDate from '@/views/common/rangeDate.vue'
+import storeList from '@/views/common/storeList.vue'
+import recordModal from './recordModal.vue'
+// 接口
+import { vinPartLogDayList } from '@/api/vinPartLog'
+export default {
+  components: { STable, VSelect, rangeDate, storeList, recordModal },
+  data () {
+    return {
+      spinning: false,
+      tableHeight: 0, // 表格高度
+      disabled: false, //  查询、重置按钮是否可操作
+      // 查询条件
+      queryParam: {
+        dealerSn: undefined, // 经销商sn
+        beginDate: undefined, // 开始日期
+        endDate: undefined// 结束日期
+      },
+      time: [], // 查询日期
+      openRecordModal: false, // 数量弹窗
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
+        { title: '日期', dataIndex: 'dateInfo', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '经销商名称', dataIndex: 'dealerName', width: '40%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '数量', dataIndex: 'queryCount', width: '20%', align: 'center', scopedSlots: { customRender: 'countVal' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        const parames = Object.assign(parameter, this.queryParam)
+        return vinPartLogDayList(parames).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (var i = 0; i < data.list.length; i++) {
+              data.list[i].no = no + i + 1
+              if (data.list[i].queryYeary && data.list[i].queryMonth && data.list[i].queryDay) {
+                data.list[i].dateInfo = data.list[i].queryYeary + '-' + String(data.list[i].queryMonth).padStart(2, '0') + '-' + String(data.list[i].queryDay).padStart(2, '0')
+              }
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      }
+    }
+  },
+  methods: {
+    //  时间  change
+    dateChange (date) {
+      this.queryParam.beginDate = date[0] + ' 00:00:00'
+      this.queryParam.endDate = date[1] + ' 23:59:60'
+    },
+    // 经销商查询
+    custChange (val) {
+      this.queryParam.dealerSn = val ? val.key : undefined
+    },
+    // 数量弹窗
+    handleDetail (row) {
+      const ajaxData = {
+        dealerSn: row.tenantId,
+        queryYeary: row.queryYeary,
+        queryMonth: row.queryMonth,
+        queryDay: row.queryDay
+      }
+      this.$refs.recordModal.pageInit(ajaxData)
+      this.$nextTick(() => {
+        this.openRecordModal = true
+      })
+    },
+    // 重置
+    resetSearchForm () {
+      this.time = []
+      this.queryParam.dealerSn = undefined
+      this.queryParam.beginDate = undefined
+      this.queryParam.endDate = undefined
+      this.$refs.rangeDate.resetDate(this.time)
+      this.$refs.storeList.resetForm()
+      this.$refs.table.refresh(true)
+    },
+    setTableH () {
+      const tableSearchH = this.$refs.tableSearch.offsetHeight
+      this.tableHeight = window.innerHeight - tableSearchH - 330
+    },
+    pageInit () {
+      const _this = this
+      this.$nextTick(() => { // 页面渲染完成后的回调
+        _this.setTableH()
+        _this.resetSearchForm()
+      })
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+    }
+  },
+  watch: {
+    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时,需同时更改表格高度
+      this.setTableH()
+    }
+  },
+  activated () {
+    // 如果是新页签打开,则重置当前页面
+    if (this.$store.state.app.isNewTab) {
+      this.pageInit()
+    }
+    // 仅刷新列表,不重置页面
+    if (this.$store.state.app.updateList) {
+      this.setTableH()
+      this.$refs.table.refresh()
+    }
+  }
+}
+</script>

+ 174 - 0
src/views/vinReport/vinReportDetails/monthReportList.vue

@@ -0,0 +1,174 @@
+<template>
+  <a-card size="small" :bordered="false" class="approveStore-wrap">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <!-- 搜索条件 -->
+      <div ref="tableSearch" class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+          <a-row :gutter="15">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="月份">
+                <a-month-picker format="YYYY-MM" @change="handleChange" style="width:100%;" :disabled-date="disabledDate" placeholder="请选择查询月份" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="经销商">
+                <storeList ref="storeList" @change="custChange"></storeList>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <div>
+                <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="approveStore-refresh">查询</a-button>
+                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="approveStore-reset">重置</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 列表 -->
+      <s-table
+        class="sTable fixPagination"
+        ref="table"
+        :style="{ height: tableHeight+84.5+'px' }"
+        size="small"
+        :rowKey="(record) => record.no"
+        rowkeyName="no"
+        :columns="columns"
+        :data="loadData"
+        :scroll="{ y: tableHeight }"
+        :defaultLoadData="false"
+        bordered>
+        <!-- 数量-->
+        <template slot="countVal" slot-scope="text, record">
+          <a-button class="button-info" type="link" @click="handleDetail(record)" id="approveStore-refresh">{{ record.queryCount||record.queryCount==0? record.queryCount:'--' }}</a-button>
+        </template>
+      </s-table>
+    </a-spin>
+    <!-- 数量 -->
+    <recordModal ref="recordMonthModal" :openModal="openRecordModal" @close="openRecordModal=false" />
+  </a-card>
+</template>
+
+<script>
+// 组件
+import { STable, VSelect } from '@/components'
+import rangeDate from '@/views/common/rangeDate.vue'
+import storeList from '@/views/common/storeList.vue'
+import moment from 'moment'
+import recordModal from './recordModal.vue'
+// 接口
+import { vinPartLogMonthList } from '@/api/vinPartLog'
+export default {
+  components: { STable, VSelect, rangeDate, storeList, recordModal },
+  data () {
+    return {
+      spinning: false,
+      tableHeight: 0, // 表格高度
+      disabled: false, //  查询、重置按钮是否可操作
+      // 查询条件
+      queryParam: {
+        dealerSn: undefined, // 经销商sn
+        beginDate: undefined, // 开始日期
+        endDate: undefined // 结束日期
+      },
+      openRecordModal: false, // 记录弹窗
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
+        { title: '月份', dataIndex: 'dateInfo', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '经销商名称', dataIndex: 'dealerName', width: '40%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '数量', dataIndex: 'queryCount', width: '20%', align: 'center', scopedSlots: { customRender: 'countVal' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        return vinPartLogMonthList(Object.assign(parameter, this.queryParam)).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (var i = 0; i < data.list.length; i++) {
+              data.list[i].no = no + i + 1
+              if (data.list[i].queryYeary && data.list[i].queryMonth) {
+                data.list[i].dateInfo = data.list[i].queryYeary + '-' + String(data.list[i].queryMonth).padStart(2, '0')
+              }
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      }
+    }
+  },
+  methods: {
+    disabledDate (current) {
+      return current && current > moment().endOf('day')
+    },
+    //  月份  change
+    handleChange (date, dateString) {
+      if (dateString) {
+        this.queryParam.beginDate = dateString + '-01 00:00:00'
+        const endTime = moment(dateString).endOf('month').format('YYYY-MM-DD')
+        this.queryParam.endDate = endTime + ' 23:59:60'
+      }
+    },
+    // 数量弹窗
+    handleDetail (row) {
+      const ajaxData = {
+        dealerSn: row.tenantId,
+        queryYeary: row.queryYeary,
+        queryMonth: row.queryMonth
+      }
+      this.$refs.recordMonthModal.pageInit(ajaxData)
+      this.$nextTick(() => {
+        this.openRecordModal = true
+      })
+    },
+    // 经销商查询
+    custChange (val) {
+      this.queryParam.dealerSn = val ? val.key : undefined
+    },
+    // 重置
+    resetSearchForm () {
+      this.queryParam.delearSn = undefined
+      this.queryParam.beginDate = undefined
+      this.queryParam.endDate = undefined
+      this.$refs.storeList.resetForm()
+      this.$refs.table.refresh(true)
+    },
+    setTableH () {
+      const tableSearchH = this.$refs.tableSearch.offsetHeight
+      this.tableHeight = window.innerHeight - tableSearchH - 330
+    },
+    pageInit () {
+      const _this = this
+      this.$nextTick(() => { // 页面渲染完成后的回调
+        _this.setTableH()
+        _this.resetSearchForm()
+      })
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+    }
+  },
+  watch: {
+    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时,需同时更改表格高度
+      this.setTableH()
+    }
+  },
+  activated () {
+    // 如果是新页签打开,则重置当前页面
+    if (this.$store.state.app.isNewTab) {
+      this.pageInit()
+    }
+    // 仅刷新列表,不重置页面
+    if (this.$store.state.app.updateList) {
+      this.setTableH()
+      this.$refs.table.refresh()
+    }
+  }
+}
+</script>

+ 197 - 0
src/views/vinReport/vinReportDetails/recordList.vue

@@ -0,0 +1,197 @@
+<template>
+  <a-card size="small" :bordered="false" class="approveStore-wrap">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <!-- 搜索条件 -->
+      <div ref="tableSearch" class="table-page-search-wrapper" v-if="searchData&&Object.keys(searchData).length==0">
+        <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+          <a-row :gutter="15">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="日期">
+                <rangeDate ref="rangeDate" v-model="time" @change="dateChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="经销商">
+                <storeList ref="storeList" @change="custChange"></storeList>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="车架号">
+                <a-input allowClear v-model.trim="queryParam.vin" placeholder="请输入车架号" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <div>
+                <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="approveStore-refresh">查询</a-button>
+                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="approveStore-reset">重置</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- 列表 -->
+      <s-table
+        class="sTable fixPagination"
+        ref="table"
+        :style="{ height:tableHeight+84.5+'px'}"
+        size="small"
+        :rowKey="(record) => record.id"
+        :columns="columns"
+        :data="loadData"
+        :scroll="{ y: tableHeight }"
+        :defaultLoadData="false"
+        bordered>
+        <!-- 图标-->
+        <template slot="iconVal" slot-scope="text, record">
+          <img :src="record.carIcon" width="30" height="30" alt="图片走丢了" @click="inited(text)"/>
+        </template>
+        <!-- 配件 -->
+        <template slot="partCode" slot-scope="text, record">
+          <a-tooltip placement="left">
+            <template slot="title">
+              {{ record.partCode }}
+            </template>
+            <span>...</span>
+          </a-tooltip>
+        </template>
+      </s-table>
+    </a-spin>
+  </a-card>
+</template>
+
+<script>
+// 组件
+import { STable, VSelect } from '@/components'
+import rangeDate from '@/views/common/rangeDate.vue'
+import storeList from '@/views/common/storeList.vue'
+// 接口
+import { vinPartLogRecordList } from '@/api/vinPartLog'
+export default {
+  components: { STable, VSelect, rangeDate, storeList },
+  props: {
+    searchData: { //  弹框显示状态
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      spinning: false,
+      tableHeight: 0, // 表格高度
+      disabled: false, //  查询、重置按钮是否可操作
+      // 查询条件
+      queryParam: {
+        dealerSn: undefined, // 经销商sn
+        beginDate: undefined, // 开始日期
+        endDate: undefined, // 结束日期
+        vin: undefined
+      },
+      time: [], // 查询日期
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
+        { title: '时间', dataIndex: 'createDate', width: '14%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '经销商名称', dataIndex: 'dealerName', width: '15%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '车架号', dataIndex: 'vin', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '品牌', dataIndex: 'carBrandName', width: '8%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '车型', dataIndex: 'carModelName', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '年款', dataIndex: 'carModelYear', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '排量', dataIndex: 'carDisplacement', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '图标', dataIndex: 'carIcon', width: '8%', align: 'center', scopedSlots: { customRender: 'iconVal' } },
+        { title: '配置', dataIndex: 'carConfLevel', width: '26%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '配件', dataIndex: 'partCode', width: '6%', align: 'center', scopedSlots: { customRender: 'partCode' }, ellipsis: true }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        let parames = Object.assign(parameter, this.queryParam)
+        if (this.searchData && Object.keys(this.searchData).length > 0) {
+          parames = Object.assign(parames, this.searchData)
+        }
+        return vinPartLogRecordList(parames).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (var i = 0; i < data.list.length; i++) {
+              data.list[i].no = no + i + 1
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      }
+    }
+  },
+  methods: {
+    //  时间  change
+    dateChange (date) {
+      this.queryParam.beginDate = date[0] + ' 00:00:00'
+      this.queryParam.endDate = date[1] + ' 23:59:60'
+    },
+    // 经销商查询
+    custChange (val) {
+      this.queryParam.dealerSn = val ? val.key : undefined
+    },
+    inited (viewer) {
+      if (viewer && viewer.length) {
+        this.$info({
+          title: '图片预览',
+          okText: '关闭',
+          width: '400px',
+          content: (h) => { return h('img', { attrs: { src: viewer }, style: { width: '100%' } }) }
+        })
+      }
+    },
+    // 重置
+    resetSearchForm () {
+      this.time = []
+      this.queryParam.delearSn = undefined
+      this.queryParam.beginDate = undefined
+      this.queryParam.endDate = undefined
+      this.queryParam.vin = undefined
+      if (this.searchData && Object.keys(this.searchData).length == 0) {
+        this.$refs.rangeDate.resetDate(this.time)
+        this.$refs.storeList.resetForm()
+      }
+      this.$refs.table.refresh(true)
+    },
+    setTableH () {
+      const tableSearchH = this.searchData && Object.keys(this.searchData).length > 0 ? 120 : this.$refs.tableSearch.offsetHeight
+      this.tableHeight = window.innerHeight - tableSearchH - 330
+    },
+    pageInit () {
+      const _this = this
+      this.$nextTick(() => { // 页面渲染完成后的回调
+        _this.setTableH()
+        _this.resetSearchForm()
+      })
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+    }
+  },
+  watch: {
+    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时,需同时更改表格高度
+      this.setTableH()
+    }
+  },
+  activated () {
+    // 如果是新页签打开,则重置当前页面
+    if (this.$store.state.app.isNewTab) {
+      this.pageInit()
+    }
+    // 仅刷新列表,不重置页面
+    if (this.$store.state.app.updateList) {
+      this.setTableH()
+      this.$refs.table.refresh()
+    }
+  }
+}
+</script>

+ 72 - 0
src/views/vinReport/vinReportDetails/recordModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <a-modal
+    centered
+    class="chainGroupStore-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="VIN记录"
+    v-model="isShow"
+    @cancle="isShow=false"
+    width="73%">
+    <!-- 主要内容 -->
+    <div>
+      <record-list-info :searchData="searchData" ref="recordList"></record-list-info>
+      <div class="btn-cont">
+        <a-button id="chainGroupStore-back" @click="isShow = false">关闭</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import recordListInfo from '@/views/vinReport/vinReportDetails/recordList.vue'
+export default {
+  name: 'ChainGroupEditModal',
+  components: { recordListInfo },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      searchData: null
+    }
+  },
+  methods: {
+    pageInit (data) {
+      this.searchData = data
+      const _this = this
+      _this.$nextTick(() => {
+        _this.$refs.recordList.pageInit()
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .chainGroupStore-modal{
+    .ant-modal-body {
+      padding: 25px 40px 24px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 25px 0 10px;
+    }
+  }
+</style>