antissoft / lvqianmeiye_ERP

  <template>
  	<div class="NCC-common-layout">
  		<div class="NCC-common-layout-center">
  			<el-row class="NCC-common-search-box" :gutter="16">
  				<el-form @submit.native.prevent>

  					<el-col :span="6">

  						<el-form-item label="申请时间">
  							<el-date-picker v-model="query.applicationTime" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
  							</el-date-picker>

  						</el-form-item>
  					</el-col>
  					<el-col :span="6">

  						<el-form-item label="申请人">
  							<userSelect v-model="query.applicationUserId" placeholder="请选择申请人" clearable />	

  						</el-form-item>
  					</el-col>

                      <el-col :span="6">
  						<el-form-item label="门店">
  							<el-select v-model="query.applicationStoreId" placeholder="请选择门店" clearable filterable style="width: 100%">
  								<el-option
  									v-for="store in storeOptions"
  									:key="store.id"
  									:label="store.dm"
  									:value="store.id">
  								</el-option>
  							</el-select>

  						</el-form-item>
  					</el-col>
  					<template v-if="showAll">

                          <el-col :span="6">
                              <el-form-item label="审批状态">
  							<el-select v-model="query.approveStatus" placeholder="请选择审批状态" clearable style="width: 100%">
  								<el-option label="已审批" value="已审批"></el-option>
                                  <el-option label="未通过" value="未通过"></el-option>
  								<el-option label="未审批" value="未审批"></el-option>
  							</el-select>

  						</el-form-item>

                          </el-col>
  					
  					<!-- <el-col :span="6">

  						<el-form-item label="总金额">
  							<el-input v-model="query.amount" placeholder="总金额" clearable />	
  						</el-form-item>

  					</el-col> -->
  					<!-- <el-col :span="6">

  						<el-form-item label="审批人">
  							<userSelect v-model="query.approveUser" placeholder="请选择审批人" />
  						</el-form-item>
  					</el-col>
  					<el-col :span="6">
  						<el-form-item label="审批结果">
  							<el-input v-model="query.approveStatus" placeholder="审批结果" clearable />	
  						</el-form-item>
  					</el-col>
  					<el-col :span="6">
  						<el-form-item label="审批时间">
  							<el-date-picker v-model="query.approveTime" type="daterange" value-format="timestamp" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
  							</el-date-picker>
  						</el-form-item>

  					</el-col> -->
  					<!-- <el-col :span="6">

  						<el-form-item label="关联购买编号">
  							<el-input v-model="query.purchaseRecordsId" placeholder="关联购买编号" clearable />	
  						</el-form-item>

  					</el-col> -->

  					</template>
  					<el-col :span="6">
  						<el-form-item>
  							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
  							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
  							<el-button type="text" icon="el-icon-arrow-down" @click="showAll=true" v-if="!showAll">展开</el-button>
  							<el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>收起</el-button>
  						</el-form-item>
  					</el-col>
  				</el-form>
  			</el-row>
  			<div class="NCC-common-layout-main NCC-flex-main">
  				<div class="NCC-common-head">
  					<div>
  						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>

                          <el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
  						<!-- <el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
  						<el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button> -->

  					</div>
  					<div class="NCC-common-head-right">
  						<el-tooltip effect="dark" content="刷新" placement="top">
  							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
  						</el-tooltip>
  						<screenfull isContainer />
  					</div>
  				</div>
                  <NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">

  					<!-- <el-table-column prop="id" label="申请编号" align="left" /> -->
  					<!-- <el-table-column prop="applicationUserId" label="申请人编号" align="left" /> -->
  					<el-table-column prop="applicationUserName" label="申请人" align="left" />
  					<el-table-column prop="applicationStoreId" label="门店" align="left">
  						<template slot-scope="scope">
  							<div class="store-info">
  								<i class="el-icon-shop"></i>
  								<span>{{ getStoreName(scope.row.applicationStoreId) || '无' }}</span>
  							</div>
  						</template>
  					</el-table-column>

  					<el-table-column prop="applicationTime" label="申请时间" align="left" :formatter="ncc.tableDateFormat" />
  					<el-table-column prop="amount" label="总金额" align="left" />

                      <el-table-column prop="approveStatus" label="审批状态" align="left"/>
  					<!-- <el-table-column prop="approveUser" label="审批人" align="left" />

  					<el-table-column prop="approveStatus" label="审批结果" align="left" />

  					<el-table-column prop="approveTime" label="审批时间" align="left" :formatter="ncc.tableDateFormat" /> -->
  					<!-- <el-table-column prop="purchaseRecordsId" label="关联购买编号" align="left" /> -->

  					<el-table-column label="操作" fixed="right" width="100">
  							<template slot-scope="scope">

  							<el-button type="text" v-if="scope.row.approveStatus === '未审批'" @click="addOrUpdateHandle(scope.row.id)" >编辑</el-button>
  							<el-button type="text" v-if="scope.row.approveStatus === '已审批'" @click="showDetail(scope.row.id)" >查看</el-button>
                              <!-- <el-button type="text" v-if="scope.row.approveStatus === '未审批'" @click="handleDel(scope.row.id)" class="NCC-table-delBtn" >删除</el-button> -->

  						</template>
  					</el-table-column>
  				</NCC-table>
                  <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
              </div>
          </div>
  		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
  		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />

  		<DetailDialog v-if="detailVisible" ref="DetailDialog" @close="handleDetailClose" />

  	</div>
  </template>
  <script>
      import request from '@/utils/request'
      import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

      import { getStoreSelector } from '@/api/extend/store'

      import NCCForm from './Form'
      import ExportBox from './ExportBox'

      import DetailDialog from './detail'

      import { previewDataInterface } from '@/api/systemData/dataInterface'
  	export default {

          components: { NCCForm, ExportBox, DetailDialog },

          data() {
              return {
                  showAll: false,

                  storeOptions: [],
                  storeMap: {},
                  detailVisible: false,

  				query: {
                      id:undefined,
                      applicationUserId:undefined,
                      applicationUserName:undefined,
                      applicationStoreId:undefined,
                      applicationTime:undefined,
                      amount:undefined,
                      approveUser:undefined,
                      approveStatus:undefined,
                      approveTime:undefined,
                      purchaseRecordsId:undefined,
  				},
                  list: [],
                  listLoading: true,
                  multipleSelection: [], total: 0,
                  listQuery: {
                      currentPage: 1,
                      pageSize: 20,
  					sort: "desc",
                      sidx: "",
                  },
                  formVisible: false,
                  exportBoxVisible: false,
                  columnList: [
                      { prop: 'id', label: '申请编号' },
                      { prop: 'applicationUserId', label: '申请人编号' },
                      { prop: 'applicationUserName', label: '申请人姓名' },
                      { prop: 'applicationStoreId', label: '申请门店' },
                      { prop: 'applicationTime', label: '申请时间' },
                      { prop: 'amount', label: '总金额' },
                      { prop: 'approveUser', label: '审批人' },
                      { prop: 'approveStatus', label: '审批结果' },
                      { prop: 'approveTime', label: '审批时间' },
                      { prop: 'purchaseRecordsId', label: '关联购买编号' },
  				],
  			}
          },
  		computed: {},
  		created() {

  			this.loadStoreOptions()

  			this.initData()
  		},
  		methods: {

              		// 加载门店列表
  			loadStoreOptions() {
  				request({
  					url: '/api/Extend/LqMdxx',
  					method: 'GET',
  					data: {
  						currentPage: 1,
  						pageSize: 1000
  					}
  				}).then(res => {
  					if (res.data && res.data.list) {
  						this.storeOptions = res.data.list;
  					}
  				}).catch(() => {
  					this.storeOptions = [];
  				});
  			},
  	
  			getStoreName(storeId) {
  				if (!storeId) return '无';
  				const store = this.storeOptions.find(item => item.id === storeId);
  				return store ? store.dm : '无';
  			},

  			initData() {
                  this.listLoading = true;
                  let _query = {
                      ...this.listQuery,
                      ...this.query
                  };
                  let query = {}
                  for (let key in _query) {
                      if (Array.isArray(_query[key])) {
                          query[key] = _query[key].join()
                      } else {
                          query[key] = _query[key]
                      }
                  }
                  request({
                      url: `/api/Extend/LqReimbursementApplication`,
                      method: 'GET',
                      data: query
                  }).then(res => {
                      this.list = res.data.list
                      this.total = res.data.pagination.total
                      this.listLoading = false
                  })
              },
  			handleDel(id) {
                  this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                      type: 'warning'
                  }).then(() => {
                      request({
                          url: `/api/Extend/LqReimbursementApplication/${id}`,
                          method: 'DELETE'
                      }).then(res => {
                          this.$message({
                              type: 'success',
                              message: res.msg,
                              onClose: () => {
                                  this.initData()
                              }
                          });
                      })
                  }).catch(() => {
                  });
              },
  			handleSelectionChange(val) {
                  const res = val.map(item => item.id)
                  this.multipleSelection = res
              },
              handleBatchRemoveDel() {
                  if (!this.multipleSelection.length) {
                      this.$message({
                          type: 'error',
                          message: '请选择一条数据',
                          duration: 1500,
                      })
                      return
                  }
                  const ids = this.multipleSelection
                  this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
                      type: 'warning'
                  }).then(() => {
                      request({
                          url: `/api/Extend/LqReimbursementApplication/batchRemove`,
                          method: 'POST',
                          data: ids ,
                      }).then(res => {
                          this.$message({
                              type: 'success',
                              message: res.msg,
                              onClose: () => {
                                  this.initData()
                              }
                          });
                      })
                  }).catch(() => { })
              },
  			addOrUpdateHandle(id, isDetail) {
                  this.formVisible = true
                  this.$nextTick(() => {
                      this.$refs.NCCForm.init(id, isDetail)
                  })
              },
  			exportData() {
                  this.exportBoxVisible = true
                  this.$nextTick(() => {
                      this.$refs.ExportBox.init(this.columnList)
                  })
              },
              download(data) {
                  let query = { ...data, ...this.listQuery, ...this.query }
                  request({
                      url: `/api/Extend/LqReimbursementApplication/Actions/Export`,
                      method: 'GET',
                      data: query
                  }).then(res => {
                      if (!res.data.url) return
                      window.location.href = this.define.comUrl + res.data.url
                      this.$refs.ExportBox.visible = false
                      this.exportBoxVisible = false
                  })
              },
  			search() {
                  this.listQuery = {
                      currentPage: 1,
                      pageSize: 20,
                      sort: "desc",
                      sidx: "",
                  }
                  this.initData()
              },
              refresh(isrRefresh) {
                  this.formVisible = false
                  if (isrRefresh) this.reset()
              },
              reset() {
                  for (let key in this.query) {
                      this.query[key] = undefined
                  }
                  this.listQuery = {
                      currentPage: 1,
                      pageSize: 20,
                      sort: "desc",
                      sidx: "",
                  }
                  this.initData()

              },
              showDetail(id) {
                  this.detailVisible = true
                  this.$nextTick(() => {
                      this.$refs.DetailDialog.init(id)
                  })
              },
              handleDetailClose() {
                  this.detailVisible = false

              }
  		}
      }

  </script>
  <style lang="scss" scoped>
  .store-info {
    display: flex;
    align-items: center;
    gap: 6px;
  
    i {
      color: #67C23A;
      font-size: 14px;
    }
  
    span {
      color: #303133;
    }
  }
  </style>