362 lines
9.8 KiB
Vue
362 lines
9.8 KiB
Vue
<!-- eslint-disable no-empty -->
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="head-container">
|
|
<el-row :gutter="20">
|
|
<el-col :span="3">
|
|
<el-input
|
|
v-model="query.name"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入耗材单位名称"
|
|
style="width: 100%"
|
|
class="filter-item"
|
|
@keyup.enter.native="getTableData"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-input
|
|
v-model="query.conTypeCode"
|
|
size="small"
|
|
clearable
|
|
placeholder="请输入耗材类型代码"
|
|
style="width: 100%"
|
|
class="filter-item"
|
|
@keyup.enter.native="getTableData"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-select
|
|
v-model="query.status"
|
|
placeholder="请选择商品规格"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
:label="item.label"
|
|
:value="item.value"
|
|
v-for="item in typeEnums"
|
|
:key="item.label"
|
|
/>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-button type="primary" @click="getTableData">查询</el-button>
|
|
<el-button @click="resetHandle">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-row>
|
|
<el-col>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click="clickdialogframe('add')"
|
|
>添加</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="head-container" id="table_drag">
|
|
<el-table
|
|
ref="table"
|
|
:data="tableData.data"
|
|
v-loading="tableData.loading"
|
|
row-key="id"
|
|
>
|
|
<el-table-column prop="id" label="ID" width="50px" />
|
|
<el-table-column label="耗材单位名称" prop="name" />
|
|
<el-table-column label="耗材单位值" prop="value" />
|
|
|
|
<!-- <el-table-column label="是否按照当前单位消耗" prop="isconsume">
|
|
<template v-slot="scope">
|
|
<el-switch v-model="scope.row.isConsume" @change="isConsumeChange(scope.row)" />
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column label="创建时间" prop="createTime">
|
|
<template v-slot="scope">
|
|
{{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200">
|
|
<template v-slot="scope">
|
|
<!-- <el-button type="text" icon="el-icon-rank">排序</el-button> -->
|
|
<el-button
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="clickdialogframe('edit', scope.row)"
|
|
>编辑</el-button
|
|
>
|
|
<!-- <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
|
|
<el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
|
|
slot="reference">删除</el-button>
|
|
</el-popconfirm> -->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-pagination
|
|
:total="tableData.total"
|
|
:current-page="tableData.page + 1"
|
|
:page-size="tableData.size"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@current-change="paginationChange"
|
|
@size-change="
|
|
(e) => {
|
|
tableData.size = e;
|
|
tableData.page = 0;
|
|
getTableData();
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
<el-dialog
|
|
:title="dialogtitle"
|
|
:visible.sync="dialogshow"
|
|
@close="resetRuleForm"
|
|
>
|
|
<el-form ref="refruleForm" :model="ruleForm" :rules="rules" value-key="">
|
|
<el-form-item label="父单位" prop="parentId">
|
|
<el-select v-model="ruleForm.parentId" placeholder="请选择父单位">
|
|
<el-option
|
|
v-for="item in unitLists"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="耗材单位名称" prop="name">
|
|
<el-input v-model="ruleForm.name" />
|
|
</el-form-item>
|
|
<el-form-item label="耗材单位值" prop="value">
|
|
<el-input v-model="ruleForm.value" type="number" />
|
|
</el-form-item>
|
|
<el-form-item label="是否按照当前单位消耗" prop="isConsume">
|
|
<el-switch v-model="ruleForm.isConsume" />
|
|
</el-form-item>
|
|
<el-form-item style="display: flex; justify-content: flex-end">
|
|
<el-button @click="dialogshow = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm('refruleForm')"
|
|
>确 定</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Sortable from "sortablejs";
|
|
import dayjs from "dayjs";
|
|
import settings from "@/settings";
|
|
import {
|
|
queryTbConUnitInfo,
|
|
addtbConUnit,
|
|
edittbConUnit,
|
|
} from "@/api/consumable";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
unitLists: [
|
|
{
|
|
label: "无",
|
|
value: null,
|
|
},
|
|
],
|
|
dayjs,
|
|
query: {
|
|
name: "",
|
|
parentId: "",
|
|
status: "",
|
|
},
|
|
categorys: [],
|
|
typeEnums: [
|
|
{
|
|
label: "正常",
|
|
value: "1",
|
|
},
|
|
{
|
|
label: "禁用",
|
|
value: "0",
|
|
},
|
|
],
|
|
dialogshow: false, //弹框显示
|
|
dialogtitle: "", //文字显示
|
|
tableData: {
|
|
data: [],
|
|
page: 0,
|
|
size: 30,
|
|
loading: false,
|
|
total: 0,
|
|
},
|
|
ruleForm: {
|
|
parentId: "",
|
|
name: "",
|
|
value: "",
|
|
shopId: localStorage.getItem("shopId"),
|
|
isConsume: false,
|
|
},
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: "请输入耗材单位名称", trigger: "blur" },
|
|
],
|
|
value: [
|
|
{ required: true, message: "请输入耗材单位值", trigger: "blur" },
|
|
],
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getTableData();
|
|
this.getAllUnit();
|
|
this.$nextTick(() => {
|
|
// this.tableDrag()
|
|
});
|
|
},
|
|
methods: {
|
|
async isConsumeChange(row){
|
|
await edittbConUnit({...row,isConsume:row.isConsume?1:0})
|
|
this.$notify.success("修改成功");
|
|
},
|
|
//获取全部单位
|
|
getAllUnit() {
|
|
queryTbConUnitInfo({ size: 100, page: 0 }).then((res) => {
|
|
const arr = res.content.map((item) => {
|
|
return {
|
|
label: item.name,
|
|
value: item.id,
|
|
};
|
|
});
|
|
this.unitLists.push(...arr);
|
|
});
|
|
},
|
|
resetRuleForm() {
|
|
this.ruleForm.name=''
|
|
this.ruleForm.value=''
|
|
this.ruleForm.parentId=''
|
|
this.ruleForm.isConsume=false
|
|
this.$refs.refruleForm.resetFields();
|
|
},
|
|
// 重置查询
|
|
resetHandle() {
|
|
this.query.name = "";
|
|
this.query.parentId = "";
|
|
this.query.status = "";
|
|
this.tableData.page = 0;
|
|
this.getTableData();
|
|
},
|
|
// 分页回调
|
|
paginationChange(e) {
|
|
this.tableData.page = e - 1;
|
|
this.getTableData();
|
|
},
|
|
// 获取耗材单位列表
|
|
async getTableData() {
|
|
this.tableData.loading = true;
|
|
try {
|
|
const res = await queryTbConUnitInfo({
|
|
page: this.tableData.page,
|
|
size: this.tableData.size,
|
|
name: this.query.name,
|
|
status: this.query.status,
|
|
shopId: localStorage.getItem("shopId"),
|
|
});
|
|
this.tableData.loading = false;
|
|
this.tableData.data = res.content;
|
|
this.tableData.total = res.totalElements;
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
// 弹框修改值 添加 编辑
|
|
clickdialogframe(type, item) {
|
|
// eslint-disable-next-line eqeqeq
|
|
if (type == "add") {
|
|
// 添加
|
|
this.dialogtitle = "添加";
|
|
this.$nextTick(() => {
|
|
this.$refs.refruleForm.resetFields();
|
|
});
|
|
} else {
|
|
this.dialogtitle = "编辑";
|
|
this.ruleForm.id = item.id;
|
|
this.ruleForm.name = item.name;
|
|
this.ruleForm.value = item.value;
|
|
this.ruleForm.isConsume = item.isConsume == 1 ? true : false;
|
|
}
|
|
this.dialogshow = true;
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate(async (valid) => {
|
|
if (valid) {
|
|
if (this.dialogtitle == "编辑") {
|
|
await edittbConUnit(this.ruleForm);
|
|
this.dialogshow = false;
|
|
this.$notify.success("修改成功");
|
|
this.getTableData();
|
|
} else {
|
|
console.log(this.ruleForm);
|
|
const { name, value, parentId, isConsume } = this.ruleForm;
|
|
await addtbConUnit({
|
|
name,
|
|
value,
|
|
parentId,
|
|
isConsume: isConsume ? "1" : "0",
|
|
});
|
|
this.$notify.success("添加成功");
|
|
}
|
|
this.dialogshow = false;
|
|
this.$refs[formName].resetFields();
|
|
this.getTableData();
|
|
} else {
|
|
console.log("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields();
|
|
},
|
|
// 删除商品
|
|
async delTableHandle(ids) {
|
|
try {
|
|
await tbProductDelete(ids);
|
|
this.getTableData();
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.handle {
|
|
font-size: 18px;
|
|
color: #999;
|
|
|
|
&:hover {
|
|
cursor: grab;
|
|
}
|
|
}
|
|
|
|
.shop_info {
|
|
display: flex;
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding-left: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.tag_wrap {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|