219 lines
6.7 KiB
Vue
219 lines
6.7 KiB
Vue
<template>
|
||
<div class="percentage-content">
|
||
<div class="content">
|
||
<div style="margin-bottom: 16px;" class="h-layout space-between h-center">
|
||
<div>
|
||
<div class="h-layout">
|
||
<div class="tool-item" @click="(dialogVisible = true), (form = {}),(readonly=false)">
|
||
<svg-icon name="add" class="icon" />
|
||
<span >新增</span>
|
||
</div>
|
||
<div class="tool-item" @click="getCompanyList">
|
||
<svg-icon name="refurbish" class="icon" />
|
||
<span>刷新</span>
|
||
</div>
|
||
<div class="tool-item" @click="getCompanyList">
|
||
<svg-icon name="export" class="icon" />
|
||
<span>导出</span>
|
||
</div>
|
||
<div v-if="tableCheckBoxs.length > 0" class="tool-item" @click="deletelist">
|
||
<svg-icon name="delete" class="icon" />
|
||
<span>删除</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 30%;">
|
||
<div>
|
||
<el-input
|
||
v-model="search"
|
||
@keydown.enter.native="getCompanyList"
|
||
placeholder="输入仓库名称"
|
||
class="search-input"
|
||
>
|
||
<template #append>
|
||
<span @click="getCompanyList" class="search-bottom">
|
||
<svg-icon name="search" class="icon_class" />
|
||
<span>搜索</span>
|
||
</span>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
ref="loading"
|
||
v-loading="tableDataloading"
|
||
:data="tableData"
|
||
header-row-class-name="el-one-header"
|
||
@selection-change="handleSelectionChange"
|
||
border
|
||
>
|
||
<el-table-column type="selection" align="center" width="55"></el-table-column>
|
||
<el-table-column type="index" align="center" label="序列" width="60"></el-table-column>
|
||
<el-table-column
|
||
prop="houseName"
|
||
:resizable="true"
|
||
align="center"
|
||
label="仓库名称"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="nameText"
|
||
:resizable="true"
|
||
align="center"
|
||
label="管理员"
|
||
>
|
||
<template #default="scope">
|
||
{{ scope.row.nameText }}（{{ scope.row.possession }}）
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="telephone"
|
||
:resizable="true"
|
||
align="center"
|
||
label="联系方式"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="possession"
|
||
:resizable="true"
|
||
align="center"
|
||
label="所属单位"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="address"
|
||
:resizable="true"
|
||
align="center"
|
||
label="地址"
|
||
></el-table-column>
|
||
<el-table-column :resizable="true" align="center" width="180" label="操作">
|
||
<template #default="scope">
|
||
<span class="operate" @click="
|
||
(dialogVisible = true), (form = scope.row),(readonly=false)"
|
||
>
|
||
<svg-icon name="edit" class="icon"></svg-icon>
|
||
<span class="edit">编辑</span>
|
||
</span>
|
||
<span class="operate" @click="
|
||
(dialogVisible = true), (form = scope.row),(readonly=true)"
|
||
>
|
||
<svg-icon name="detail" class="icon"></svg-icon>
|
||
<span class="detail">详情</span>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<el-pagination
|
||
class="pagination"
|
||
@size-change="getCompanyList"
|
||
@current-change="getCompanyList"
|
||
v-model:current-page.sync="currentPage"
|
||
:page-sizes="[10, 15, 20, 30]"
|
||
v-model:page-size.sync="pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
background
|
||
>
|
||
</el-pagination>
|
||
<!-- 新增 -->
|
||
<Adddetails :visible="dialogVisible" :form="form" :readonly="readonly" @close="onclone" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang='ts' setup>
|
||
import { onMounted, reactive, ref } from "vue";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import { getOtheWareHousePage,delOtheWareHouse } from "@/api/Othteam";
|
||
import Adddetails from "./details.vue";
|
||
import useUserStore from "@/store/modules/user";
|
||
const userStore = useUserStore();
|
||
const user = ref(JSON.parse(userStore.userInfo));
|
||
const userId = ref(user.value.userId)
|
||
const search = ref([]);
|
||
const tableData = ref([]);
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(10);
|
||
const total = ref(0);
|
||
|
||
const dialogVisible = ref(false);
|
||
const form = ref({});
|
||
const readonly = ref(false);
|
||
|
||
//列表选中
|
||
const tableCheckBoxs = ref([]);
|
||
const handleSelectionChange = (val:any) => {
|
||
tableCheckBoxs.value = [];
|
||
for (let index = 0; index < val.length; index++) {
|
||
const element = val[index];
|
||
tableCheckBoxs.value.push(element.houseId);
|
||
}
|
||
};
|
||
//获取列表
|
||
const tableDataloading = ref(false);
|
||
const getCompanyList = () => {
|
||
tableDataloading.value = true;
|
||
let params = {
|
||
houseName: search.value,
|
||
limit: pageSize.value,
|
||
page: currentPage.value,
|
||
};
|
||
getOtheWareHousePage(params).then((res:any) => {
|
||
tableData.value = res.data.list;
|
||
total.value = res.data.total;
|
||
tableDataloading.value = false;
|
||
})
|
||
};
|
||
//删除列表
|
||
const deletelist = () => {
|
||
ElMessageBox.confirm("是否确认删除?", "提示", {
|
||
confirmButtonText: "是",
|
||
cancelButtonText: "否",
|
||
type: "warning",
|
||
}).then(() => {
|
||
let params = {
|
||
houseId:tableCheckBoxs.value.join(", "),
|
||
userId:userId.value
|
||
}
|
||
delOtheWareHouse(params).then((res: any) => {
|
||
if (res.code == 1) {
|
||
ElMessage.success({
|
||
message: "删除成功",
|
||
type: "success",
|
||
});
|
||
} else {
|
||
ElMessage.error({
|
||
message: res.message,
|
||
type: "error",
|
||
});
|
||
}
|
||
getCompanyList();
|
||
});
|
||
});
|
||
};
|
||
//关闭新增弹窗
|
||
const onclone = () => {
|
||
dialogVisible.value = false;
|
||
form.value = {};
|
||
getCompanyList();
|
||
};
|
||
onMounted(() => {
|
||
getCompanyList();
|
||
})
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
width: 100%;
|
||
// flex: auto;
|
||
background: #fff;
|
||
border-radius: 0.26042vw;
|
||
box-shadow: 0 0 0.41667vw 0 rgb(8 33 85 / 10%);
|
||
height: 100%;
|
||
padding: 0.83333vw;
|
||
overflow-y: auto;
|
||
overflow-x: hidden !important;
|
||
box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
</style> |