baozhida_erp/src/views/storehouse/inventory/InStorage.vue

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { GlobalStore } from '@/stores/index'
import { View,Edit,Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import InStorageForm from './InStorageForm.vue'
import InStorageEdit from './InStorageEdit.vue'


import { ref, reactive } from 'vue'
import TableBase from '@/components/TableBase/index.vue'
import type { ColumnProps } from '@/components/TableBase/interface/index'
import { Storehouse_StockIn_List,Storehouse_StockIn_del } from '@/api/storehouse/index'
import { depotHooks } from '@/hooks/useDepot'

const router = useRouter()
const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)

const columns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_number', label: '入库单号' },
  { prop: 'T_submit_name', label: '经办人' },
  { prop: 'T_depot_name', label: '入库仓库' },
  { prop: 'T_date', label: '入库日期' },
  { prop: 'operation', label: '操作', width: 260, fixed: 'right' }
]

const InStorageFormRef = ref<InstanceType<typeof InStorageForm> | null>(null)
const InStorageRef = ref()

/**
 * 查看详情
 */
const preview = (id: string) => {
  router.push({ name: 'InStorageDetail', params: { id } })
}
/**
 * 编辑
 */
const previewEdit = (row: any) => {
    // console.log('编辑',row,InStorageRef.value)
  InStorageRef.value?.openDrawer()
  InStorageRef.value?.getStorehouseContractGet(row.T_number)
  for (let key in InStorageRef.value?.form) {  
    if (row.hasOwnProperty(key)) InStorageRef.value.form[key] = row[key]; 
  }
//   console.log('111',InStorageRef.value?.form)

}

// 搜索
const T_date = ref<string[]>([])

const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_end_date: '',
  T_start_date: '',
  T_depot_id: ''
})

const searchHandle = () => {
  initParam.T_end_date = T_date.value ? T_date.value[1] : ''
  initParam.T_start_date = T_date.value ? T_date.value[0] : ''
  TableRef.value?.searchTable()
}
/**
 * 添加入库
 */
const openInStorageFormDrawer = () => InStorageFormRef.value?.openDrawer()

/**
 * 删除
 */
const deleteFun = (row:any)=>{
    ElMessageBox.confirm(
    '删除操作，是否立即删除?',
    '删除',
    {
      confirmButtonText: '立即删除',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  ).then(async () => {
    const result:any = await Storehouse_StockIn_del({T_number:row})
    if(result.Code==200){
        ElMessage.success('删除成功')
        TableRef.value?.searchTable()
    }
    }).catch(() => {})
}


// 拿到仓库列表
const { options } = depotHooks()
</script>

<template>
  <div class="InStorage">
    <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_StockIn_List" :initParam="initParam">
      <template #table-header>
        <div class="input-suffix">
          <el-row :gutter="20" style="margin-bottom: 0">
            <el-col :xl="6" :lg="9" :md="11" style="display: flex">
              <span class="inline-flex items-center">入库日期：</span>
              <el-date-picker
                v-model="T_date"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-col>
            <el-col :xl="6" :lg="7" :md="9" style="display: flex">
              <span class="inline-flex items-center">仓库：</span>
              <el-select v-model="initParam.T_depot_id" clearable placeholder="请选择仓库~">
                <el-option v-for="item in options" :key="item.Id" :label="item.T_name" :value="item.Id" />
              </el-select>
              <el-button type="primary" @click="searchHandle">搜索</el-button>
            </el-col>
            <el-col :xl="12" :lg="8" :md="4" class="btn"
              ><el-button type="primary" @click="openInStorageFormDrawer">入库</el-button></el-col
            >
          </el-row>
        </div>
      </template>
      <template #right="{ row }">
        <el-button link type="success" size="small" :icon="View" @click="preview(row.T_number)">详情</el-button>
        <el-button link type="success" size="small" :icon="Edit" @click="previewEdit(row)">编辑</el-button>
        <el-button link type="danger" size="small" :icon="Delete" @click="deleteFun(row.T_number)">删除</el-button>

      </template>
    </TableBase>
    <InStorageForm ref="InStorageFormRef" :options="options" @onUpdateList="searchHandle" />
    <InStorageEdit ref="InStorageRef" :options="options" @onUpdateList="searchHandle" />

  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.InStorage {
  @include f-direction;

  .input-suffix {
    width: 100%;
    .inline-flex {
      white-space: nowrap;
    }
    .w-50 {
      width: 12.5rem;
    }
    .btn {
      display: flex;
      justify-content: end;
      .el-button {
        padding: 0 20px;
      }
    }
  }
}
</style>