baozhida_erp/src/views/storehouse/outStock/ContractNumber.vue

<script setup lang="ts">
import { ref } from 'vue'
import { Storehouse_Contract_Out_List } from '@/api/storehouse/index'
import Drawer from '@/components/Drawer/index.vue'
import { GlobalStore } from '@/stores/index'
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'

const search = ref('')
const globalStore = GlobalStore()
const drawer = ref<InstanceType<typeof Drawer> | null>(null)
const tableRef = ref<InstanceType<typeof TableBase> | null>(null)

const Dialogcolumns: ColumnProps[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'T_number', label: '合同编号' },
  { prop: 'T_customer', label: '客户名称' },
  { prop: 'T_out', label: '出库状态', name: 'T_out' }
]
const InitParam = {
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_dept_leader: 1
}
const searchHandle = () => {
  InitParam.T_name = search.value
  tableRef.value?.searchTable()
}
/**
 * 获取信息
 */
const getApproverInfo = (row: any) => {
  emit('onContactInfo', row)
  drawer.value?.closeDrawer()
}

const emit = defineEmits<{ (event: 'onContactInfo', value: any): void }>()

const openDrawer = () => drawer.value?.openDrawer()
defineExpose({
  openDrawer
})
</script>

<template>
  <Drawer ref="drawer" size="50%">
    <template #header="{ params }">
      <h3 :id="params.titleId" :class="params.titleClass">合同编号</h3>
    </template>
    <TableBase
      ref="tableRef"
      :columns="Dialogcolumns"
      :initParam="InitParam"
      :requestApi="Storehouse_Contract_Out_List"
      layout="total, prev, pager, next"
      :rowClick="getApproverInfo"
    >
      <template #table-header>
        <el-row :gutter="20">
          <el-col :span="24" class="d-flex">
            <span class="inline-flex">合同编号：</span>
            <el-input v-model="search" type="text" placeholder="按合同编号搜索" />
            <el-button type="primary" @click="searchHandle">搜索</el-button>
          </el-col>
        </el-row>
      </template>
      <template #T_out="{ row }">
        <el-tag v-if="row.T_out === 2 || row.T_out === 3" type="success" effect="dark">
          {{ row.T_out === 2 ? '已部分出库' : '已全部出库' }}
        </el-tag>
        <el-tag v-else-if="row.T_out === 1" type="warning" effect="dark"> 未出库 </el-tag>
        <el-tag v-else type="danger" effect="dark"> --- </el-tag>
      </template>
    </TableBase>
  </Drawer>
</template>

<style scoped>
.inline-flex {
  white-space: nowrap;
}
.d-flex {
  display: flex;
  align-items: center;
}
</style>