pengjun 2 years ago
parent
commit
724f608fc3
  1. 8
      src/App.vue
  2. 165
      src/api/api.js
  3. 621
      src/views/basic-dictionary/CommonCharacters.vue

8
src/App.vue

@ -9,7 +9,6 @@
</template>
<style lang="scss">
//
.addorbottom {
border: none;
@ -67,4 +66,11 @@
margin: 0;
padding: 0;
}
.boxStyle {
font-size: 30px;
.el-loading-spinner .el-loading-text {
font-size: 18px;
margin-top: 10px;
}
}
</style>

165
src/api/api.js

@ -3,99 +3,100 @@ import mm from "@/utlis/mm";
import { Loading } from 'element-ui';
export async function getapi(url, params = {}, config) {
return new Promise((resolve, reject) => {
let loading = Loading.service({
lock: true,
fontSize:"24px",
text: "Loading...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0)",
return new Promise((resolve, reject) => {
let loading = Loading.service({
lock: true,
text: "正在加载中,请稍后",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0)",
customClass: "boxStyle"
});
request
.get(`${mm.apiurl}${url}`, {
params: params,
...config,
})
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err.data);
})
.finally(() => {
loading.close();
});
});
request
.get(`${mm.apiurl}${url}`, {
params: params,
...config,
})
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err.data);
})
.finally(() => {
loading.close();
});
});
}
//axios封装post
export async function postapi(url, paramsdata = {}, config) {
return new Promise((resolve, reject) => {
let loading = Loading.service({
lock: true,
text: "Loading...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0)",
return new Promise((resolve, reject) => {
let loading = Loading.service({
lock: true,
text: "正在加载中,请稍后",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0)",
customClass: "boxStyle"
});
request
.post(`${mm.apiurl}${url}`, paramsdata, config)
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err.data);
})
.finally(() => {
loading.close();
});
});
request
.post(`${mm.apiurl}${url}`, paramsdata, config)
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err.data);
})
.finally(() => {
loading.close();
});
});
}
//axios封装deleteapi
export async function deletapi(url, params = {}, config) {
return new Promise((resolve, reject) => {
let loading = Loading.service({
lock: true,
text: "Loading...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0)",
return new Promise((resolve, reject) => {
let loading = Loading.service({
lock: true,
text: "正在加载中,请稍后",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0)",
customClass: "boxStyle"
});
request
.delete(`${mm.apiurl}${url}`, {
params: params,
...config,
})
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err.data);
})
.finally(() => {
loading.close();
});
});
request
.delete(`${mm.apiurl}${url}`, {
params: params,
...config,
})
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err.data);
})
.finally(() => {
loading.close();
});
});
}
//axios封装Put方法
export async function putapi(url, params = {}, config) {
return new Promise((resolve, reject) => {
let loading = Loading.service({
lock: true,
text: "Loading...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0)",
return new Promise((resolve, reject) => {
let loading = Loading.service({
lock: true,
text: "正在加载中,请稍后",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0)",
customClass: "boxStyle"
});
request
.put(`${mm.apiurl}${url}`, params, config)
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err.data);
})
.finally(() => {
loading.close();
});
});
request
.put(`${mm.apiurl}${url}`, params, config)
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err.data);
})
.finally(() => {
loading.close();
});
});
}
}

621
src/views/basic-dictionary/CommonCharacters.vue

@ -1,223 +1,289 @@
<template>
<div class="box">
<div style="position: relative">
<div class="middlebox">
<div>
<div class="middlebox">
<div class="contenttitle">
基础字典 /
<span class="contenttitleBold"
>常用字符</span
>
<span class="contenttitleBold">常用字符</span>
</div>
<!-- <div class="seachinput">
<el-select
v-model="department"
placeholder="请搜索"
filterable
:filter-method="remoteMethodes"
default-first-option
@change="quckDepartments"
clearable
size="small"
>
<el-option
v-for="item in quckDepartment"
:key="item.id"
:label="item.displayName"
:value="item.id"
</div>
<div style="display: flex; margin-top: 7px">
<div
:style="
'width: 208px;overflow: scroll;height:' +
(window.pageHeight < 600 ? 480 : window.pageHeight - 100) +
'px;background-color: #fff; border-radius: 8px'
"
>
<div style="margin-top: 10px">
<el-tree
:data="category"
:props="treeprops"
@node-click="treeclick"
node-key="id"
ref="itemType"
highlight-current
auto-expand-parent
>
</el-option>
</el-select>
</div> -->
<span class="custom-tree-node" slot-scope="{ node, data }">
<div>
<span class="treeicons">
<!-- <i
class="el-icon-document-remove"
v-if="data.parentId == null"
></i> -->
<img
style="width: 20px; height: 20px; vertical-align: sub"
src="@/assets/images/order.png"
v-if="data.parentId == null"
/>
</span>
<span
:class="data.parentId == null ? 'maxtitle' : 'mintitle'"
>{{ node.label }}</span
>
</div>
</span>
</el-tree>
</div>
</div>
<div style="display: block; margin-top: 7px; margin-right: 110px">
<div style="background-color: #fff; padding: 15px; border-radius: 8px">
<div id="printTest">
<el-table
:data="tableData"
row-key="id"
class="el-table__body-wrapper tbody"
@row-click="rowick"
highlight-current-row
:height="window.pageHeight < 600 ? 480 : window.pageHeight - 130"
ref="tableData"
>
<el-table-column prop="id" label="编号" width="300">
</el-table-column>
<el-table-column prop="displayName" label="名称" width="">
</el-table-column>
<el-table-column prop="commonCharName" label="字符类别" width="">
</el-table-column>
<el-table-column prop="creatorName" label="创建者" width="">
</el-table-column>
<el-table-column prop="lastModifierName" label="修改者" width="">
</el-table-column>
<!-- <el-table-column prop="simpleCode" label="简称" width="180">
<div style="display: block">
<div style="margin-left: 15px; display: flex">
<div
:style="
'width:' +
(window.pageWidth - 200 - 110 - 50 - 14) +
'px;padding: 15px;background-color: #fff;border-radius: 8px;'
"
>
<div id="printTest">
<el-table
:data="tableData"
row-key="id"
class="el-table__body-wrapper tbody"
@row-click="rowick"
highlight-current-row
:height="
window.pageHeight < 600 ? 450 : window.pageHeight - 130
"
ref="tableData"
>
<el-table-column prop="id" label="编号" width="300">
</el-table-column>
<el-table-column prop="displayName" label="名称" width="">
</el-table-column>
<el-table-column
prop="commonCharTypeName"
label="字符类别"
width=""
>
</el-table-column>
<el-table-column prop="creatorName" label="创建者" width="">
</el-table-column>
<el-table-column
prop="lastModifierName"
label="修改者"
width=""
>
</el-table-column>
<!-- <el-table-column prop="simpleCode" label="简称" width="180">
</el-table-column> -->
<el-table-column prop="creationTime" label="创建时间" width="200">
<template slot-scope="scope">
{{ scope.row.creationTime | dateFormat }}
</template>
</el-table-column>
<el-table-column
prop="lastModificationTime"
label="修改时间"
width="200"
>
<template slot-scope="scope">
{{ scope.row.lastModificationTime | dateFormat }}
</template>
</el-table-column>
<el-table-column label="操作" width="" align="center">
<template>
<el-tag
class="move"
style="
cursor: move;
background-color: rgb(245, 245, 245);
border: none;
"
draggable="true"
<el-table-column
prop="creationTime"
label="创建时间"
width="200"
>
<template slot-scope="scope">
{{ scope.row.creationTime | dateFormat }}
</template>
</el-table-column>
<el-table-column
prop="lastModificationTime"
label="修改时间"
width="200"
>
<template slot-scope="scope">
{{ scope.row.lastModificationTime | dateFormat }}
</template>
</el-table-column>
<el-table-column label="操作" width="" align="center">
<template>
<el-tag
class="move"
style="
cursor: move;
background-color: rgb(245, 245, 245);
border: none;
"
draggable="true"
>
<i
class="el-icon-d-caret"
style="
width: 1rem;
height: 1rem;
color: rgb(113, 113, 113);
"
></i>
</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 按钮区域 -->
<div style="margin-left: 10px">
<el-button type="" @click="add" class="commonbutton"
>新增</el-button
>
<i
class="el-icon-d-caret"
style="width: 1rem; height: 1rem; color: rgb(113, 113, 113)"
></i>
</el-tag>
</template>
</el-table-column>
</el-table>
</div>
<div style="margin-top: 10px">
<el-button type="" @click="edlits" class="commonbutton"
>编辑</el-button
>
</div>
<div style="margin-top: 10px">
<el-button type="" @click="deleteid" class="commonbutton"
>删除</el-button
>
</div>
<div style="margin-top: 10px">
<el-button type="" @click="topping" class="commonbutton"
>置顶</el-button
>
</div>
<div style="margin-top: 10px">
<el-button type="" @click="toppings" class="commonbutton"
>置底</el-button
>
</div>
<div style="margin-top: 10px">
<el-button
type=""
:disabled="isshow"
@click="assertion"
class="commonbutton"
>排序</el-button
>
</div>
<div style="margin-top: 10px">
<el-button
type=""
:disabled="isshow"
@click="cancellation"
class="commonbutton"
>取消</el-button
>
</div>
</div>
</div>
</div>
<!-- 按钮区域 -->
<div style="margin-left: 10px;margin-top: 3%;position: absolute;top: 0;right: 0;">
<el-button type="" @click="add" class="commonbutton">新增</el-button>
<div style="margin-top: 10px">
<el-button type="" @click="edlits" class="commonbutton">编辑</el-button>
</div>
<div style="margin-top: 10px">
<el-button type="" @click="deleteid" class="commonbutton"
>删除</el-button
>
</div>
<div style="margin-top: 10px">
<el-button type="" @click="topping" class="commonbutton"
>置顶</el-button
>
</div>
<div style="margin-top: 10px">
<el-button type="" @click="toppings" class="commonbutton"
>置底</el-button
>
</div>
<div style="margin-top: 10px">
<el-button
type=""
:disabled="isshow"
@click="assertion"
class="commonbutton"
>排序</el-button
>
</div>
<div style="margin-top: 10px">
<el-button
type=""
:disabled="isshow"
@click="cancellation"
class="commonbutton"
>取消</el-button
>
</div>
</div>
<!-- <div class="cancelorconfirm"></div> -->
<!-- 新增或者编辑弹框 -->
<!-- <div class="cancelorconfirm"></div> -->
<!-- 新增或者编辑弹框 -->
<el-dialog
:title="title == 1 ? '新增' : '修改'"
:visible.sync="dialogVisible"
width="75%"
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="编号">
<el-input
v-model="form.id"
style="width: 65%"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="字符类别">
<el-select v-model="form.commonCharTypeId" placeholder="请选择" size="small">
<el-option v-for="item in category" :key="item.id" :label="item.displayName" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="名称">
<el-input
ref="refinput"
v-model="form.displayName"
style="width: 65%"
size="small"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-divider></el-divider>
<el-col :span="4" style="margin-left: 15px">
<el-form-item label="创建者">
<el-input v-model="form.creatorName" disabled size="small"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间">
<el-input
:value="form.creationTime | dateFormat"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="修改者">
<el-input v-model="form.lastModifierName" disabled size="small"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="修改时间">
<el-input
style="width: 85%"
:value="form.lastModificationTime | dateFormat"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" class="difference"> </el-button>
<el-button type="primary" @click="addoredit" class="commonbutton"
> </el-button
>
</span>
</el-dialog>
<el-dialog
:title="title == 1 ? '新增' : '修改'"
:visible.sync="dialogVisible"
width="75%"
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="编号">
<el-input
v-model="form.id"
style="width: 65%"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="字符类别">
<el-select
v-model="form.commonCharTypeId"
placeholder="请选择"
size="small"
>
<el-option
v-for="item in category"
:key="item.id"
:label="item.displayName"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="名称">
<el-input
ref="refinput"
v-model="form.displayName"
style="width: 65%"
size="small"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-divider></el-divider>
<el-col :span="4" style="margin-left: 15px">
<el-form-item label="创建者">
<el-input
v-model="form.creatorName"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间">
<el-input
:value="form.creationTime | dateFormat"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="修改者">
<el-input
v-model="form.lastModifierName"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="修改时间">
<el-input
style="width: 85%"
:value="form.lastModificationTime | dateFormat"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" class="difference"
> </el-button
>
<el-button type="primary" @click="addoredit" class="commonbutton"
> </el-button
>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import Sortable from "sortablejs";
import { mapState } from "vuex";
import {
getCharacterCategories
} from "../../request/systemapi";
import { deletapi, getapi, postapi, putapi } from '@/api/api';
import { getCharacterCategories } from "../../request/systemapi";
import { deletapi, getapi, postapi, putapi } from "@/api/api";
export default {
data() {
return {
@ -226,7 +292,7 @@ export default {
title: 1,
form: {
displayName: "",
commonCharTypeId:""
commonCharTypeId: "",
},
tableData: [],
pages: {
@ -237,26 +303,32 @@ export default {
},
initTableData: [],
curRow: {},
department:"",
quckDepartment:[],
category:[]
department: "",
quckDepartment: [],
category: [],
treeprops: {
label: "displayName",
value: "id",
children: "treeChildren",
}, //
commonCharTypeId:""
};
},
created() {
this.getlist();
this.getcategory()
// this.getlist();
this.getcategory();
},
mounted() {
this.rowDrop();
},
computed: {
computed: {
...mapState(["window"]),
},
methods: {
getcategory(){
getCharacterCategories(this.pages).then((res) => {
if(res.code!=-1){
this.category=[...res.data.items]
getcategory() {
getCharacterCategories(this.pages).then((res) => {
if (res.code != -1) {
this.category = [...res.data.items];
}
});
},
@ -289,25 +361,42 @@ export default {
},
quckDepartments(e) {
if (e) {
this.tableData.forEach((item,index) => {
this.tableData.forEach((item, index) => {
if (e == item.id) {
this.$refs["tableData"].setCurrentRow(item);
this.rowick(item);
this.searchup(item,index)
this.searchup(item, index);
}
});
} else {
this.remoteMethodes();
}
},
searchup(data,index) {
if(index>3){
const targetTop = this.$refs["tableData"].$el.querySelectorAll('.el-table__body tr')[index-1].getBoundingClientRect().top
const containerTop = this.$refs["tableData"].$el.querySelector('.el-table__body').getBoundingClientRect().top
const scrollParent = this.$refs["tableData"].$el.querySelector('.el-table__body-wrapper')
scrollParent.scrollTop = targetTop - containerTop
searchup(data, index) {
if (index > 3) {
const targetTop = this.$refs["tableData"].$el
.querySelectorAll(".el-table__body tr")
[index - 1].getBoundingClientRect().top;
const containerTop = this.$refs["tableData"].$el
.querySelector(".el-table__body")
.getBoundingClientRect().top;
const scrollParent = this.$refs["tableData"].$el.querySelector(
".el-table__body-wrapper"
);
scrollParent.scrollTop = targetTop - containerTop;
}
},
},
treeclick(data) {
this.commonCharTypeId = data.id;
postapi("/api/app/CommonChar/GetCommonCharList",{
commonCharTypeId:this.commonCharTypeId
}).then((res) => {
if (res.code != -1) {
this.initTableData = [...res.data];
this.tableData = res.data;
}
});
},
cancellation() {
this.$message.info("取消操作");
this.isshow = true;
@ -321,17 +410,19 @@ export default {
// const currentDisplayOrder = this.tableData.length -1
// const currentDisplayOrder = this.initTableData[index].displayOrder;
// if (item.displayOrder != currentDisplayOrder) {
// displayOrder
result.push({ id: item.id, displayOrder: index+1 });
// displayOrder
result.push({ id: item.id, displayOrder: index + 1 });
// }
});
putapi("/api/app/commonchar/updatesortmany",{ itemList: result }).then((res) => {
if(res.code!=-1){
this.getlist();
this.isshow = true;
this.$message.success('操作成功')
putapi("/api/app/commonchar/updatesortmany", { itemList: result }).then(
(res) => {
if (res.code != -1) {
this.getlist();
this.isshow = true;
this.$message.success("操作成功");
}
}
});
);
},
//
rowDrop() {
@ -343,9 +434,9 @@ export default {
animation: 300,
//
// draggable: ".module-manager .el-table__row",
onChoose({oldIndex}){
_this.$refs['tableData'].setCurrentRow(_this.tableData[oldIndex]);
_this.rowick(_this.tableData[oldIndex])
onChoose({ oldIndex }) {
_this.$refs["tableData"].setCurrentRow(_this.tableData[oldIndex]);
_this.rowick(_this.tableData[oldIndex]);
},
onEnd({ newIndex, oldIndex }) {
// console.log(arr);
@ -369,10 +460,12 @@ export default {
if (this.form.id == undefined) {
this.$message.warning("请选择操作的数据");
} else {
putapi(`/api/app/commonchar/updatemanysort?id=${this.form.id}&SortType=1`).then((res) => {
if(res.code!=-1){
putapi(
`/api/app/commonchar/updatemanysort?id=${this.form.id}&SortType=1`
).then((res) => {
if (res.code != -1) {
this.getlist();
this.$message.success('操作成功')
this.$message.success("操作成功");
}
});
}
@ -382,10 +475,12 @@ export default {
if (this.form.id == undefined) {
this.$message.warning("请选择操作的数据");
} else {
putapi(`/api/app/commonchar/updatemanysort?id=${this.form.id}&SortType=2`).then((res) => {
if(res.code!=-1){
putapi(
`/api/app/commonchar/updatemanysort?id=${this.form.id}&SortType=2`
).then((res) => {
if (res.code != -1) {
this.getlist();
this.$message.success('操作成功')
this.$message.success("操作成功");
}
});
}
@ -400,15 +495,15 @@ export default {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
cancelButtonClass:"difference",
confirmButtonClass:"commonbutton"
cancelButtonClass: "difference",
confirmButtonClass: "commonbutton",
})
.then(() => {
deletapi(`/api/app/common-char/${this.form.id}`).then((res) => {
if(res.code!=-1){
if (res.code != -1) {
this.form = {};
this.getlist();
this.$message.success('删除成功')
this.$message.success("删除成功");
}
});
})
@ -424,7 +519,7 @@ export default {
this.title = 2;
this.dialogVisible = true;
getapi(`/api/app/common-char/${this.form.id}`).then((res) => {
if(res.code!=-1){
if (res.code != -1) {
this.form = res.data;
}
});
@ -434,12 +529,15 @@ export default {
addoredit() {
if (this.title == 1) {
if (this.form.displayName != undefined) {
postapi("/api/app/common-char",{ displayName: this.form.displayName,commonCharTypeId:this.form.commonCharTypeId }).then((res) => {
postapi("/api/app/common-char", {
displayName: this.form.displayName,
commonCharTypeId: this.form.commonCharTypeId,
}).then((res) => {
// this.form.displayName = "";
if(res.code!=-1){
if (res.code != -1) {
this.getlist();
this.dialogVisible = false;
this.$message.success('新增成功')
this.$message.success("新增成功");
}
});
} else if (this.form.displayName == undefined) {
@ -447,15 +545,16 @@ export default {
}
} else if (this.title == 2) {
if (this.form.displayName != "") {
putapi(`/api/app/common-char/${this.form.id}`, { displayName: this.form.displayName,commonCharTypeId:this.form.commonCharTypeId }).then(
(res) => {
if(res.code!=-1){
this.getlist();
this.dialogVisible = false;
this.$message.success('修改成功')
}
putapi(`/api/app/common-char/${this.form.id}`, {
displayName: this.form.displayName,
commonCharTypeId: this.form.commonCharTypeId,
}).then((res) => {
if (res.code != -1) {
this.getlist();
this.dialogVisible = false;
this.$message.success("修改成功");
}
);
});
} else if (this.form.displayName == "") {
this.$message.warning("请输入名称");
}
@ -465,18 +564,20 @@ export default {
add() {
this.dialogVisible = true;
this.title = 1;
this.form = {};
Object.assign(this.$data.form, this.$options.data().form);
this.form.commonCharTypeId = this.commonCharTypeId;
this.$nextTick(() => {
this.$refs.refinput.focus();
});
},
//
getlist() {
getapi("/api/app/common-char/in-filter").then((res) => {
if(res.code!=-1){
this.initTableData = [...res.data.items];
this.tableData = res.data.items;
// this.quckDepartment=[...res.data.items]
postapi("/api/app/CommonChar/GetCommonCharList",{
commonCharTypeId:this.commonCharTypeId
}).then((res) => {
if (res.code != -1) {
this.initTableData = [...res.data];
this.tableData = res.data;
}
});
},

Loading…
Cancel
Save