zhywpt-web/src/views/inventoryControl/newInventory/cardDeviceManagement/index.vue

<template>
  <div>
    <crud-template ref="crudRef" class="as-weight" :submit-state="false" :home-data="field" :tableData="tableData"
      @btnSearch="btnSearch" @CurrentChange="handleCurrentChange" @importData="importData" @download="downloadHandle"
      @refreshLeft="refreshLeft" @add="Adds" @cancel="cancel" @submit="submitAdd" @handleEdit="itemEdit">
      <template #search>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.startId" style="width: 200px"
          placeholder="请输入起始卡号" />
        <el-input maxlength="60" v-trim clearable v-model="searchForm.endId" style="width: 200px"
          placeholder="请输入结束卡号" />
        <el-select v-model="searchForm.status" placeholder="请选择设备状态" style="width: 240px">
          <el-option v-for="item in INV_DEVICE_STATUS" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.storeCode" style="width: 200px"
          placeholder="请输入仓库编号" />
      </template>
      <template #operation=scope>

        <el-popconfirm title="是否确认删除？" @confirm="handleAudit(scope.scope.$index, scope.scope.row, 1)">
          <template #reference>
            <el-button size="small" type="danger">
              移除
            </el-button>
          </template>
        </el-popconfirm>
        <el-button type="success" size="small" @click="handleAudit(scope.$index, scope.scope.row, 2)">
          一发信息查询
        </el-button>
        <el-button type="success" size="small" @click="lossReporting(scope)">
          报损
        </el-button>
      </template>
    </crud-template>
    <el-dialog title="报损" v-model="dialogShow" width="400px">
      <el-input v-model="textarea" style="width: 100%" :rows="2" type="textarea" placeholder="请输入报损原因" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogShow = false">取消</el-button>
          <el-button type="primary" @click="handleAudit(0, 0, 3)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="一发信息查询" v-model="dialogShowTwo" width="80%">
      <view>
        <view>
          <crud-template :home-data="InvwQryCardBatchData" :tableData="InvwQryCardBatchList"></crud-template>
        </view>
        <view>
          <crud-template :home-data="InvwQryCardsData" :tableData="InvwQryCardsList"></crud-template>
        </view>
      </view>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
// @ts-ignore crudFrom模板
import CrudTemplate from '@/crud/index.vue'
import BaseService from '@/utils/baseService' //引入接口请求
import {
  ElMessage,
} from 'element-plus' //提示
import { getZxqdFindConfig,InvwQryCardBatch,InvwQryCards } from "./data.js";
import { useRoute } from 'vue-router'
import { exportFn } from '@/views/settlement/exportFn'
import $storeinitData from "@/store/initData";
const INV_DEVICE_STATUS = computed(() => {
  return $storeinitData.state.dictData['INV_DEVICE_STATUS'] || []
})
//或取路由传入过来的对象数据
const route = useRoute()
const widthBase = '120px';
const crudRef = ref()
let tableData: any = ref([])
const itemStartValue = ref("1")
//查询参数
const searchForm = ref({})
const agencyIdList = ref([])
const idx = ref('')
const textarea = ref('')
const dialogShow = ref(false)
const dialogShowTwo = ref(false)
const field = ref(getZxqdFindConfig(route, agencyIdList));
const InvwQryCardBatchData = ref(InvwQryCardBatch(route, agencyIdList));
const InvwQryCardsData = ref(InvwQryCards(route, agencyIdList));
const InvwQryCardBatchList = ref([]);
const InvwQryCardsList = ref([]);
onMounted(() => {
  getList()
})

// 导出
function downloadHandle() {
  exportFn('/invw/api/cardDetails/export', searchForm.value, '卡设备管理')
}
function lossReporting(scope) {
  idx.value = scope.scope.row.id;
  dialogShow.value = true;
}
//获取列表
function getList() {
  crudRef.value.tableLoding = true
  let params: any = {
    pageNo: field.value.paging.currentPage,
    pageSize: field.value.paging.pageSize,
  }
  //赋值查询参数
  let searchFormList = { ...searchForm.value }
  for (let key in searchFormList) {
    if (searchFormList[key]) {
      params[key] = searchFormList[key]
    }
  }
  BaseService.postN('/invw/api/cardDetails/page', params).then((res: any) => {
    if (res && res.code === 0) {
      //数据转换
      let bizContent = res.data
      let data = bizContent.result || []
      //数据渲染
      tableData.value = data
      crudRef.value.tableLoding = false
      //分页总数
      field.value.paging.total = bizContent.totalCount
    } else {
      crudRef.value.tableLoding = false
      ElMessage.error(res.message)
    }
  })
}


function handleAudit(ids: any, row: any, type: any) {
  let url = ''
  let data = {}
  if (type == '1') { //移除
    url = '/invw/api/cardDetails/remove'
    data = { id: row.id }
  } else if (type == '2') { //一发信息查询
    url = '/invw/api/cardDetails/queryCard'
    data = { cardId: row.cardId }
  } else if (type == '3') { //报损
    data = { id: idx.value, reason: textarea.value }
    url = '/invw/api/cardDetails/breakage'
  }
  BaseService.post(url, data).then((res: any) => {
    if (res && res.statusCode === 0) {
      if (type == '1') {
        ElMessage.success('移除成功')
      } else if (type == '2') {
        dialogShowTwo.value = true
        InvwQryCardBatchList.value = res.data.InvwQryCardBatchList
        InvwQryCardsList.value = res.data.InvwQryCardBatchList
        ElMessage.success('查询成功')
      } else if (type == '3') {
        ElMessage.success('报损成功')
        dialogShow.value = false
      }
      getList()
    }
  })
}

const Adds = () => {
  itemStartValue.value = 1
}
//表单编辑按钮
function itemEdit(idx: any, row: any) {
  itemStartValue.value = 2
}

// 添加
const submitAdd = (data: any) => {
  request(data, itemStartValue.value)
}

const request = (data: any, type: any) => {
  data.optType = type //操作类型 1新增 2修改 
  BaseService.postN(itemStartValue.value == 1 ? '/userw/wxCar/add' : '/userw/wxCar/update', data).then((res: any) => {
    if (res && res.code === 0) {
      getList()
      crudRef.value.reset();
      crudRef.value.dialogFormVisible = false;
    } else {
      ElMessage.error(res.message)
    }
  })
}
// 删除
const deleteHandle = (index) => {
  addForm.value.locationModels.splice(index, 1)
}
// 搜索按钮
function btnSearch() {
  field.value.paging.currentPage = 1
  getList()
}

//标签分页
function handleClick(tab, event) {
  orderStep.value = tab.props.name
  getList()
}

//分页
function handleCurrentChange(val: number) {
  field.value.paging.currentPage = val
  getList()
}
function handleAvatarSuccess(response: any, row) {

}
// 搜索重置
function refreshLeft() {
  searchForm.value = {}
  getList()
}


//编辑
function handleEdit() {

}
// 删除
function handleDetele() {

}

// 取消
function cancel() {

}
</script>
<style lang="scss" scoped></style>