材料
This commit is contained in:
quantulr
410
material_management/index.html
Normal file
410
material_management/index.html
Normal file
@ -0,0 +1,410 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
||||
<link rel="stylesheet" href="../lib/css/modern-normalize.css" />
|
||||
|
||||
<!-- element-plus style -->
|
||||
<link rel="stylesheet" href="../lib/css/element-plus-index.css" />
|
||||
|
||||
<style>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
<title>组织管理</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
v-show="showSearch"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item label="材料名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入材料名称"
|
||||
clearable
|
||||
size="default"
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="规格型号" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择规格型号"
|
||||
>
|
||||
<el-option label="型号2" :value="0"></el-option>
|
||||
<el-option label="型号1" :value="1"></el-option>
|
||||
<el-option label="型号3" :value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="time">
|
||||
<el-date-picker
|
||||
v-model="queryParams.time"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="search"
|
||||
size="default"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="Refresh" size="default" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="plus"
|
||||
size="default"
|
||||
@click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button type="warning" plain size="default" @click="handleAdd"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button type="danger" plain size="default" @click="handleAdd"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="dataList" style="width: 100%">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column
|
||||
label="材料名称"
|
||||
prop="name"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="规格型号"
|
||||
prop="model"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="单位"
|
||||
prop="unit"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="库存数量"
|
||||
prop="count"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="含税金额"
|
||||
prop="withTax"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="负责人"
|
||||
prop="principal"
|
||||
align="center"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="{row,$index}">
|
||||
<el-link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
size="small"
|
||||
@click="handleEdit($index)"
|
||||
>编辑</el-link
|
||||
>
|
||||
<el-link
|
||||
type="danger"
|
||||
icon="Delete"
|
||||
size="small"
|
||||
@click="handleDelete($index)"
|
||||
>删除</el-link
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:currentPage="queryParams.page"
|
||||
v-model:page-size="queryParams.limit"
|
||||
background
|
||||
:page-sizes="[10, 20, 30, 50]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
></el-pagination>
|
||||
<el-dialog title="查看" v-model="showEditDialog" width="500px">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="材料名称:" prop="name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号:" prop="model">
|
||||
<el-input v-model="form.model" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位:" prop="unit">
|
||||
<el-input v-model="form.unit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量:" prop="count">
|
||||
<el-input v-model="form.count" />
|
||||
</el-form-item>
|
||||
<el-form-item label="含税金额:" prop="withTax">
|
||||
<el-input v-model="form.withTax" />
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人:" prop="principal">
|
||||
<el-input v-model="form.principal" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../lib/js/vue.global.js"></script>
|
||||
<script src="../lib/js/element-plus.full.js"></script>
|
||||
<script src="../lib/js/element-plus-zh-cn.js"></script>
|
||||
<!-- element-plus icon -->
|
||||
<script src="../lib/js/element-plus-icon-vue.js"></script>
|
||||
<script src="../lib/js/lodash.js"></script>
|
||||
<script src="../lib/js/axios.min.js"></script>
|
||||
<script type="module">
|
||||
const { createApp, ref, reactive, toRefs } = Vue;
|
||||
const { ElMessage, ElMessageBox } = ElementPlus;
|
||||
import {
|
||||
getOrganizational,
|
||||
deleteOrganizational,
|
||||
} from "/common/js/api/organizational.js";
|
||||
|
||||
const app = createApp({
|
||||
setup() {
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
form: {},
|
||||
rules: {
|
||||
name: [{ required: true, trigger: "blur", message: "名称必填" }],
|
||||
model: [
|
||||
{ required: true, trigger: "blur", message: "规格型号必填" },
|
||||
],
|
||||
unit: [{ required: true, trigger: "blur", message: "单位必填" }],
|
||||
count: [{ required: true, trigger: "blur", message: "数量必填" }],
|
||||
withTax: [
|
||||
{ required: true, trigger: "blur", message: "含税金额必选" },
|
||||
],
|
||||
principal: [
|
||||
{ required: true, trigger: "blur", message: "负责人必填" },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
const dataList = ref([
|
||||
{
|
||||
name: "熟石灰",
|
||||
unit: "袋",
|
||||
count: 312,
|
||||
withTax: 23443,
|
||||
model: "20kg/袋",
|
||||
principal: "吴县",
|
||||
},
|
||||
{
|
||||
name: "生石灰",
|
||||
unit: "袋",
|
||||
count: 312,
|
||||
withTax: 23443,
|
||||
model: "20kg/袋",
|
||||
principal: "吴县",
|
||||
},
|
||||
{
|
||||
name: "白石灰",
|
||||
unit: "袋",
|
||||
count: 312,
|
||||
withTax: 23443,
|
||||
model: "20kg/袋",
|
||||
principal: "吴县",
|
||||
},
|
||||
{
|
||||
name: "绿石灰",
|
||||
unit: "袋",
|
||||
count: 312,
|
||||
withTax: 23443,
|
||||
model: "20kg/袋",
|
||||
principal: "吴县",
|
||||
},
|
||||
{
|
||||
name: "大理石",
|
||||
unit: "袋",
|
||||
count: 312,
|
||||
withTax: 23443,
|
||||
model: "20kg/袋",
|
||||
principal: "吴县",
|
||||
},
|
||||
{
|
||||
name: "小理石",
|
||||
unit: "块",
|
||||
count: 312,
|
||||
withTax: 23443,
|
||||
model: "20kg/袋",
|
||||
principal: "吴县",
|
||||
},
|
||||
{
|
||||
name: "中理石",
|
||||
unit: "斤",
|
||||
count: 312,
|
||||
withTax: 23443,
|
||||
model: "20kg/袋",
|
||||
principal: "吴县",
|
||||
},
|
||||
]);
|
||||
const showSearch = ref(true);
|
||||
const showEditDialog = ref(false);
|
||||
const loading = ref(false);
|
||||
const formRef = ref();
|
||||
const total = ref(0);
|
||||
const genderDict = reactive({
|
||||
0: "男",
|
||||
1: "女",
|
||||
});
|
||||
// 取消按钮
|
||||
const cancel = () => {
|
||||
showEditDialog.value = false;
|
||||
reset();
|
||||
};
|
||||
// 表单重置
|
||||
const reset = () => {
|
||||
form.value = {};
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
};
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const resetQuery = () => {
|
||||
queryParams.value = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
getList();
|
||||
};
|
||||
const handleDelete = async (idx) => {
|
||||
ElMessageBox.confirm(`是否删除序号为${idx}的项?`, "删除", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
dataList.value.splice(idx, 1);
|
||||
});
|
||||
};
|
||||
const handleAdd = async () => {
|
||||
reset();
|
||||
showEditDialog.value = true;
|
||||
};
|
||||
const handleEdit = async (idx) => {
|
||||
reset();
|
||||
|
||||
form.value = _.cloneDeep(dataList.value[idx]);
|
||||
|
||||
showEditDialog.value = true;
|
||||
};
|
||||
const submitForm = async () => {
|
||||
await formRef.value.validate();
|
||||
if (form.value.id) {
|
||||
cancel();
|
||||
} else {
|
||||
dataList.value.unshift(_.cloneDeep(form.value));
|
||||
cancel();
|
||||
}
|
||||
};
|
||||
const getList = async () => {
|
||||
const resp = await getOrganizational(queryParams.value);
|
||||
dataList.value = resp.data.rows;
|
||||
total.value = resp.data.total;
|
||||
};
|
||||
const handleSizeChange = () => {};
|
||||
const handleCurrentChange = (value) => {
|
||||
queryParams.value.pageNum = value;
|
||||
getList();
|
||||
};
|
||||
const switchStatus = async (row) => {
|
||||
const orgData = _.cloneDeep(row);
|
||||
console.log(orgData.status);
|
||||
try {
|
||||
await axios.put(
|
||||
`http://localhost:8000/organizational/${orgData.id}`,
|
||||
orgData
|
||||
);
|
||||
getList();
|
||||
console.log("更改状态成功");
|
||||
} catch (error) {
|
||||
getList();
|
||||
console.log("更改状态失败");
|
||||
}
|
||||
};
|
||||
// getList();
|
||||
return {
|
||||
cancel,
|
||||
reset,
|
||||
queryParams,
|
||||
dataList,
|
||||
showSearch,
|
||||
loading,
|
||||
form,
|
||||
rules,
|
||||
submitForm,
|
||||
handleQuery,
|
||||
resetQuery,
|
||||
handleDelete,
|
||||
handleAdd,
|
||||
showEditDialog,
|
||||
formRef,
|
||||
handleEdit,
|
||||
genderDict,
|
||||
total,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
switchStatus,
|
||||
};
|
||||
},
|
||||
});
|
||||
app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
|
||||
// 注册所有图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
app.mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -237,7 +237,7 @@
|
||||
const handleQuery = () => {};
|
||||
const resetQuery = () => {};
|
||||
const handleDelete = async (id) => {
|
||||
fetch(`http://localhost:8000/personnels/${id}`, {
|
||||
fetch(`http://120.48.8.98:16948/personnels/${id}`, {
|
||||
method: "DELETE",
|
||||
}).then(() => {
|
||||
console.log("删除成功");
|
||||
@ -250,7 +250,7 @@
|
||||
};
|
||||
const handleEdit = (id) => {
|
||||
reset();
|
||||
fetch(`http://localhost:8000/personnels/${id}`)
|
||||
fetch(`http://120.48.8.98:16948/personnels/${id}`)
|
||||
.then((resp) => resp.json())
|
||||
.then((data) => {
|
||||
form.value = data.data;
|
||||
@ -260,7 +260,7 @@
|
||||
const submitForm = async () => {
|
||||
await formRef.value.validate();
|
||||
if (form.value.id) {
|
||||
fetch(`http://localhost:8000/personnels/${form.value.id}`, {
|
||||
fetch(`http://120.48.8.98:16948/personnels/${form.value.id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@ -273,7 +273,7 @@
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
fetch(`http://localhost:8000/personnels`, {
|
||||
fetch(`http://120.48.8.98:16948/personnels`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@ -291,7 +291,7 @@
|
||||
};
|
||||
const getList = async () => {
|
||||
const resp = fetch(
|
||||
`http://localhost:8000/personnels?pageNum=${queryParams.value.pageNum}&pageSize=${queryParams.value.pageSize}`
|
||||
`http://120.48.8.98:16948/personnels?pageNum=${queryParams.value.pageNum}&pageSize=${queryParams.value.pageSize}`
|
||||
)
|
||||
.then((resp) => resp.json())
|
||||
.then((data) => {
|
||||
|
||||
@ -284,36 +284,28 @@
|
||||
},
|
||||
form: {},
|
||||
rules: {
|
||||
name: [{ required: true, trigger: "blur", message: "角色必填" }],
|
||||
address: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
],
|
||||
name: [{ required: true, trigger: "blur", message: "必填" }],
|
||||
address: [{ required: true, trigger: "blur", message: "必填" }],
|
||||
legalPerson: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
{ required: true, trigger: "blur", message: "必填" },
|
||||
],
|
||||
legalPersonPhone: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
],
|
||||
bank: [{ required: true, trigger: "blur", message: "角色必填" }],
|
||||
taxId: [{ required: true, trigger: "blur", message: "角色必填" }],
|
||||
contact: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
{ required: true, trigger: "blur", message: "必填" },
|
||||
],
|
||||
bank: [{ required: true, trigger: "blur", message: "必填" }],
|
||||
taxId: [{ required: true, trigger: "blur", message: "必填" }],
|
||||
contact: [{ required: true, trigger: "blur", message: "必填" }],
|
||||
contactPhone: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
{ required: true, trigger: "blur", message: "必填" },
|
||||
],
|
||||
creditCode: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
{ required: true, trigger: "blur", message: "必填" },
|
||||
],
|
||||
companyType: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
],
|
||||
region: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
],
|
||||
status: [
|
||||
{ required: true, trigger: "blur", message: "角色必填" },
|
||||
{ required: true, trigger: "blur", message: "必填" },
|
||||
],
|
||||
region: [{ required: true, trigger: "blur", message: "必填" }],
|
||||
status: [{ required: true, trigger: "blur", message: "必填" }],
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user