shentun
/
peisweb
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity
Browse Source

ui

master
罗斌杰 2 years ago
parent
bad8e47502
commit
53fdf22365
1 changed files with 361 additions and 260 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 251
      src/views/basic-dictionary/CommonCharacters.vue

251
src/views/basic-dictionary/CommonCharacters.vue
View File

@ -1,36 +1,61 @@
<template>
<div class="box">
<div style="position: relative">
<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"
</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'
"
>
<el-option
v-for="item in quckDepartment"
:key="item.id"
:label="item.displayName"
:value="item.id"
<div style="margin-top: 10px">
<el-tree
:data="category"
:props="treeprops"
@node-click="treeclick"
node-key="id"
ref="itemType"
highlight-current
auto-expand-parent
>
<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
>
</el-option>
</el-select>
</div> -->
</div>
<div style="display: block; margin-top: 7px; margin-right: 110px">
<div style="background-color: #fff; padding: 15px; border-radius: 8px">
</span>
</el-tree>
</div>
</div>
<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"
@ -38,22 +63,36 @@
class="el-table__body-wrapper tbody"
@row-click="rowick"
highlight-current-row
:height="window.pageHeight < 600 ? 480 : window.pageHeight - 130"
: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="commonCharName" label="字符类别" width="">
<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
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">
<el-table-column
prop="creationTime"
label="创建时间"
width="200"
>
<template slot-scope="scope">
{{ scope.row.creationTime | dateFormat }}
</template>
@ -80,7 +119,11 @@
>
<i
class="el-icon-d-caret"
style="width: 1rem; height: 1rem; color: rgb(113, 113, 113)"
style="
width: 1rem;
height: 1rem;
color: rgb(113, 113, 113);
"
></i>
</el-tag>
</template>
@ -88,12 +131,15 @@
</el-table>
</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-left: 10px">
<el-button type="" @click="add" class="commonbutton"
>新增</el-button
>
<div style="margin-top: 10px">
<el-button type="" @click="edlits" class="commonbutton">编辑</el-button>
<el-button type="" @click="edlits" class="commonbutton"
>编辑</el-button
>
</div>
<div style="margin-top: 10px">
<el-button type="" @click="deleteid" class="commonbutton"
@ -129,6 +175,9 @@
>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="cancelorconfirm"></div> -->
<!-- 新增或者编辑弹框 -->
@ -152,8 +201,17 @@
</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
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>
@ -172,7 +230,11 @@
<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-input
v-model="form.creatorName"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
@ -186,7 +248,11 @@
</el-col>
<el-col :span="4">
<el-form-item label="修改者">
<el-input v-model="form.lastModifierName" disabled size="small"></el-input>
<el-input
v-model="form.lastModifierName"
disabled
size="small"
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
@ -202,7 +268,9 @@
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" class="difference">取 消</el-button>
<el-button @click="dialogVisible = false" class="difference"
>取 消</el-button
>
<el-button type="primary" @click="addoredit" class="commonbutton"
>确 定</el-button
>
@ -214,10 +282,8 @@
<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: {
@ -239,12 +305,18 @@ export default {
curRow: {},
department: "",
quckDepartment: [],
category:[]
category: [],
treeprops: {
label: "displayName",
value: "id",
children: "treeChildren",
}, //左侧树形结构需要的数据
commonCharTypeId:""
};
},
created() {
this.getlist();
this.getcategory()
// this.getlist();
this.getcategory();
},
mounted() {
this.rowDrop();
@ -256,7 +328,7 @@ export default {
getcategory() {
getCharacterCategories(this.pages).then((res) => {
if (res.code != -1) {
this.category=[...res.data.items]
this.category = [...res.data.items];
}
});
},
@ -293,7 +365,7 @@ export default {
if (e == item.id) {
this.$refs["tableData"].setCurrentRow(item);
this.rowick(item);
this.searchup(item,index)
this.searchup(item, index);
}
});
} else {
@ -302,12 +374,29 @@ export default {
},
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
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;
@ -325,13 +414,15 @@ export default {
result.push({ id: item.id, displayOrder: index + 1 });
// }
});
putapi("/api/app/commonchar/updatesortmany",{ itemList: result }).then((res) => {
putapi("/api/app/commonchar/updatesortmany", { itemList: result }).then(
(res) => {
if (res.code != -1) {
this.getlist();
this.isshow = true;
this.$message.success('操作成功')
this.$message.success("操作成功");
}
});
}
);
},
//初始化
rowDrop() {
@ -344,8 +435,8 @@ export default {
// 指定父元素下可被拖拽的子元素
// draggable: ".module-manager .el-table__row",
onChoose({ oldIndex }) {
_this.$refs['tableData'].setCurrentRow(_this.tableData[oldIndex]);
_this.rowick(_this.tableData[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) => {
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) => {
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("操作成功");
}
});
}
@ -401,14 +496,14 @@ export default {
cancelButtonText: "取消",
type: "warning",
cancelButtonClass: "difference",
confirmButtonClass:"commonbutton"
confirmButtonClass: "commonbutton",
})
.then(() => {
deletapi(`/api/app/common-char/${this.form.id}`).then((res) => {
if (res.code != -1) {
this.form = {};
this.getlist();
this.$message.success('删除成功')
this.$message.success("删除成功");
}
});
})
@ -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) {
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) => {
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('修改成功')
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) => {
postapi("/api/app/CommonChar/GetCommonCharList",{
commonCharTypeId:this.commonCharTypeId
}).then((res) => {
if (res.code != -1) {
this.initTableData = [...res.data.items];
this.tableData = res.data.items;
// this.quckDepartment=[...res.data.items]
this.initTableData = [...res.data];
this.tableData = res.data;
}
});
},

Write Preview
Loading…
Cancel
Save