281 lines
7.7 KiB
Vue
281 lines
7.7 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<!-- 列表 -->
|
|
<!-- 搜索 -->
|
|
<page-search
|
|
ref="searchRef"
|
|
:search-config="searchConfig"
|
|
@query-click="newHandleQueryClick"
|
|
@reset-click="handleResetClick"
|
|
/>
|
|
<!-- 统计 -->
|
|
<data-tongji :data="gongjiData" />
|
|
<!-- 列表 -->
|
|
<page-content
|
|
ref="contentRef"
|
|
:content-config="contentConfig"
|
|
@add-click="handleAddClick"
|
|
@edit-click="handleEditClick"
|
|
@export-click="handleExportClick"
|
|
@search-click="handleSearchClick"
|
|
@toolbar-click="handleToolbarClick"
|
|
@operat-click="handleOperatClick"
|
|
@filter-change="handleFilterChange"
|
|
>
|
|
<template #status="scope">
|
|
<el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
|
|
{{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
|
|
</el-tag>
|
|
</template>
|
|
<template #conUnit="scope">
|
|
<span>{{ scope.row.conUnit }}</span>
|
|
</template>
|
|
<template #goods="scope">
|
|
<div class="goodslang">
|
|
<div class="goods-list">
|
|
<el-button
|
|
v-for="item in scope.row.productList"
|
|
:key="item.productId"
|
|
type="text"
|
|
@click="toGoods(item.id)"
|
|
>
|
|
{{ item.name }}
|
|
</el-button>
|
|
<span v-if="scope.row.productList.length > 1">,</span>
|
|
</div>
|
|
<el-dropdown v-if="scope.row.productList.length > 1" trigger="click" @command="toGoods">
|
|
<span class="el-dropdown-link" style="color: blue">
|
|
<el-icon><CaretBottom /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="item in scope.row.productList"
|
|
:key="item.id"
|
|
class="clearfix"
|
|
:command="item.id"
|
|
>
|
|
{{ item.name }}
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
<template #options="scope">
|
|
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
|
</template>
|
|
<template #state="scope">
|
|
<el-tag :type="returnStateType(scope.row[scope.prop])">
|
|
{{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
|
|
</el-tag>
|
|
</template>
|
|
<template #mobile="scope">
|
|
<el-text>{{ scope.row[scope.prop] }}</el-text>
|
|
<copy-button
|
|
v-if="scope.row[scope.prop]"
|
|
:text="scope.row[scope.prop]"
|
|
style="margin-left: 2px"
|
|
/>
|
|
</template>
|
|
<template #operate="scope">
|
|
<div
|
|
style="
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<el-button type="primary" link @click="refAddHaocaiOpen(scope.row)">编辑</el-button>
|
|
<el-button link type="primary" @click="refAddHaocaiTakinShow(scope.row, 'consumables')">
|
|
耗材盘点
|
|
</el-button>
|
|
<el-button link type="primary" @click="refAddHaocaiTakinShow(scope.row, 'manual-in')">
|
|
入库记录
|
|
</el-button>
|
|
<!-- <el-button link type="primary" @click="refAddHaocaiTakinShow(scope.row, 'delete')">
|
|
删除
|
|
</el-button> -->
|
|
</div>
|
|
</template>
|
|
</page-content>
|
|
<!-- 耗材添加编辑 -->
|
|
<add-haocai ref="refAddHaocai" @refresh="refresh" />
|
|
<!-- 耗材盘点 -->
|
|
<addConsTakin ref="refAddHaocaiTakin" @success="refresh" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import addHaocai from "./components/add-haocai.vue";
|
|
import dataTongji from "./components/DataStatistics.vue";
|
|
import addConsTakin from "./components/addConsTakin.vue";
|
|
import consApi from "@/api/product/cons";
|
|
import type { IObject, IOperatData } from "@/components/CURD/types";
|
|
import usePage from "@/components/CURD/usePage";
|
|
import contentConfig from "./config/content";
|
|
import editModalConfig from "./config/edit";
|
|
import searchConfig from "./config/search";
|
|
import { returnOptionsLabel } from "./config/config";
|
|
const router = useRouter();
|
|
const {
|
|
searchRef,
|
|
contentRef,
|
|
editModalRef,
|
|
handleQueryClick,
|
|
handleResetClick,
|
|
handleSubmitClick,
|
|
handleExportClick,
|
|
handleSearchClick,
|
|
handleFilterChange,
|
|
} = usePage();
|
|
|
|
function toGoods(id: number | string) {
|
|
router.push({ path: "/product/index", query: { id: id } });
|
|
}
|
|
|
|
//统计数据
|
|
const gongjiData = reactive({ totalRow: 0 });
|
|
function getTongji(params: IObject | undefined) {
|
|
const query = { ...params };
|
|
if (params?.createAt) {
|
|
query.beginTime = params.createAt[0];
|
|
query.endTime = params.createAt[1];
|
|
delete query.createAt;
|
|
}
|
|
consApi.statistics(query).then((res) => {
|
|
Object.assign(gongjiData, res);
|
|
});
|
|
}
|
|
|
|
function newHandleQueryClick(e: IObject | undefined) {
|
|
const filterParams = contentRef.value?.getFilterParams();
|
|
contentRef.value?.fetchPageData({ ...e, ...filterParams }, true);
|
|
getTongji(e);
|
|
}
|
|
|
|
watch(
|
|
() => contentRef.value?.pagination.total,
|
|
(newval) => {
|
|
gongjiData.totalRow = newval as number;
|
|
}
|
|
);
|
|
|
|
//耗材盘点
|
|
const refAddHaocaiTakin = ref();
|
|
function refAddHaocaiTakinShow(item: any, type: string) {
|
|
console.log(item);
|
|
if (type === "manual-in") {
|
|
router.push({ path: "/inventory/libraryrecords", query: { inOutType: type, conId: item.id } });
|
|
return;
|
|
}
|
|
if (type === "delete") {
|
|
refAddHaocaiTakin.value.show(item, type);
|
|
return;
|
|
}
|
|
if (type === "consumables") {
|
|
refAddHaocaiTakin.value.show(item, type);
|
|
return;
|
|
}
|
|
refAddHaocaiTakin.value.show(item);
|
|
}
|
|
|
|
function refresh() {
|
|
console.log("refresh");
|
|
contentRef.value?.fetchPageData();
|
|
getTongji(undefined);
|
|
}
|
|
const refAddHaocai = ref();
|
|
function refAddHaocaiOpen(item: any) {
|
|
refAddHaocai.value.open(item);
|
|
}
|
|
// 新增
|
|
async function handleAddClick() {
|
|
refAddHaocaiOpen(undefined);
|
|
}
|
|
// 编辑
|
|
async function handleEditClick(row: IObject) {
|
|
editModalRef.value?.handleDisabled(false);
|
|
editModalRef.value?.setModalVisible();
|
|
console.log({ ...row });
|
|
editModalRef.value?.setFormData({ ...row, url: [row.url] });
|
|
}
|
|
// 其他工具栏
|
|
function handleToolbarClick(name: string) {
|
|
console.log(name);
|
|
if (name === "category") {
|
|
router.push({ path: "/inventory/classification" });
|
|
return;
|
|
}
|
|
if (name == "gongyinsahng") {
|
|
router.push({ path: "/inventory/supplier" });
|
|
return;
|
|
}
|
|
if (name == "ruku") {
|
|
router.push({ path: "/inventory/operation_in" });
|
|
return;
|
|
}
|
|
if (name == "chuku") {
|
|
router.push({ path: "/inventory/operation_in", query: { type: "out" } });
|
|
return;
|
|
}
|
|
if (name == "damage-out" || name == "manual-out" || name == "manual-in") {
|
|
router.push({ path: "/inventory/libraryrecords", query: { inOutType: name } });
|
|
return;
|
|
}
|
|
}
|
|
// 其他操作列
|
|
async function handleOperatClick(data: IOperatData) {
|
|
console.log(data);
|
|
if (data.name === "detail") {
|
|
return;
|
|
}
|
|
if (data.name === "printer") {
|
|
}
|
|
}
|
|
|
|
function returnStateType(status: string) {
|
|
if (status === "unpaid") {
|
|
return "warning";
|
|
}
|
|
if (status === "done") {
|
|
return "primary";
|
|
}
|
|
if (status === "cancelled") {
|
|
return "info";
|
|
}
|
|
if (status === "refund") {
|
|
return "danger";
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
getTongji({});
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.goodslang {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.goods-list {
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //溢出用省略号显示
|
|
white-space: nowrap; //溢出不换行
|
|
}
|
|
|
|
:deep(.goods-list .el-button--text span) {
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
:deep(.goods-list .el-button--text) {
|
|
white-space: break-spaces;
|
|
}
|
|
}
|
|
</style>
|