Skip to content

M
mes-ui
Commit 9732195b authored by renjintao's avatar renjintao
Browse files
Options

转换title

parent 7ca70bdf
Show whitespace changes
Inline Side-by-side
Showing with 358 additions and 370 deletions
components/page/dataGrid.vue
View file @ 9732195b
......@@ -12,7 +12,9 @@
/>
</slot>
</div>&nbsp;
<Button v-if="high" @click="modalSearch=true" type="text"><Icon type="md-search" />高级</Button>
<Button v-if="high" @click="modalSearch=true" type="text">
<Icon type="md-search" />高级
</Button>
<div class="searchBack">
<slot name="searchBack"></slot>
</div>
......@@ -113,17 +115,17 @@
<script>
export default {
name: 'DataGrid',
name: "DataGrid",
data() {
return {
keys: '',
keys: "",
selectItems: [],
footerToolbar: false,
modalSearch: false,
search: {
pageIndex: 1,
pageSize: 20,
conditions: []
conditions: [],
},
pageSizeOpts: [20, 50, 100],
tableHeight: 0,
......@@ -134,168 +136,174 @@ export default {
configLoad: false,
userConfig: null, //用户页面配置信息。,
// userId: 1
userId: this.$store.state.userInfo.userId
}
userId: this.$store.state.userInfo.userId,
};
},
props: {
border: {
//是否显示边框
type: Boolean,
default: true
default: true,
},
batch: {
//是否批量操作
type: Boolean,
default: true
default: true,
},
lazy: {
//懒加载设置，设置为真时候，默认不加载数据。
type: Boolean,
default: false
default: false,
},
placeholder: {
type: String,
default: '请输入关键字'
default: "请输入关键字",
},
height: {
type: Number,
default: 0
default: 0,
},
tool: {
//是否显示工具栏
type: Boolean,
default: true
default: true,
},
easy: {
//是否显示简单搜索
type: Boolean,
default: true
default: true,
},
high: {
//是否显示高级搜索
type: Boolean,
default: true
default: true,
},
draggable: {
//是否可以拖拽
type: Boolean,
default: false
default: false,
},
set: {
//是否显示列设置
type: Boolean,
default: true
default: true,
},
page: {
//是否分页
type: Boolean,
default: true
default: true,
},
data: {
// 当作table使用，直接显示数据
type: Array,
default: function() {
return []
}
default: function () {
return [];
},
},
columns: {
//要显示的字段
type: Array,
default: []
default: [],
},
action: {
//接口地址
type: String,
default: ''
default: "",
},
conditions: {
//查询条件
type: Object,
default: function() {
default: function () {
return {
keys: { op: 'name', value: '', default: true }
}
}
keys: { op: "name", value: "", default: true },
};
},
},
type: {
type: String,
default: 'table',
validator: function(value) {
default: "table",
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['table', 'card', 'list'].indexOf(value) !== -1
}
return ["table", "card", "list"].indexOf(value) !== -1;
},
},
span: {
type: Number,
default: 24
}
default: 24,
},
},
created() {
this.columns.forEach((u) => {
if (!u.hide) {
u.hide = false
u.hide = false;
}
})
this.columnsCur = this.$u.clone(this.columns)
});
this.columnsCur = this.$u.clone(this.columns);
},
mounted() {
if (this.data&&this.data.length>0) {
this.list = this.data
return
if (this.data && this.data.length > 0) {
this.list = this.data;
return;
}
this.keys = ''
this.intY()
if (this.lazy==true) {
this.keys = "";
this.intY();
if (this.lazy == true) {
return;
}
this.loadUserConfig()
if (this.set == true) {
this.loadUserConfig();
}
// else
// {
// this.columnsCur = this.$u.clone(this.columns);
// }
if (this.height === 0) {
window.onresize = () => {
///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight
this.tableHeight = window.screenHeight - this.firstY - 60
})()
}
window.screenHeight = window.innerHeight;
this.tableHeight = window.screenHeight - this.firstY - 60;
})();
};
} else {
this.tableHeight = this.height
this.tableHeight = this.height;
}
//注册拖拽事件。
this.$dragging.$on('dragend', (e) => {
this.$dragging.$on("dragend", (e) => {
// console.log("dragend",e);
this.saveUserconfig()
})
this.saveUserconfig();
});
},
methods: {
//数据加载
load() {
if (this.height == 0) {
this.tableHeight = window.innerHeight - this.firstY - 60
this.tableHeight = window.innerHeight - this.firstY - 60;
}
if (this.action) {
this.$api.post(this.action, this.search).then((r) => {
this.list = r.result.items
this.search.total = r.result.totalCount
})
this.list = r.result.items;
this.search.total = r.result.totalCount;
});
}
},
columnInit() {
if (this.userConfig) {
var curColumns = []
var config = JSON.parse(this.userConfig.content)
var curColumns = [];
var config = JSON.parse(this.userConfig.content);
// console.warn("2:列比对",config)
if (config.length == this.columnsCur.length) {
config.map((u) => {
var item = this.columnsCur.filter((c) => {
return c.key == u.key
})
return c.key == u.key;
});
if (item[0]) {
item[0].hide = u.hide
curColumns.push(item[0])
item[0].hide = u.hide;
curColumns.push(item[0]);
}
})
});
// console.warn("3:初始化列")
this.columnsCur = curColumns
this.columnsCur = curColumns;
}
}
},
......@@ -303,210 +311,209 @@ export default {
var query = {
conditions: [
{
fieldName: 'creatorUserId',
fieldName: "creatorUserId",
fieldValue: this.userId,
conditionalType: 'Equal'
conditionalType: "Equal",
},
{
fieldName: 'component',
fieldValue: 'Grid',
conditionalType: 'Equal'
fieldName: "component",
fieldValue: "Grid",
conditionalType: "Equal",
},
{
fieldName: 'page',
fieldName: "page",
fieldValue: window.location.pathname,
conditionalType: 'Equal'
}
conditionalType: "Equal",
},
],
pageSize: 1
}
pageSize: 1,
};
this.$api.post(`${window.systemUrl}/config/list`, query).then((r) => {
if (r.success) {
if (r.result.length == 1) {
this.userConfig = r.result[0]
this.userConfig = r.result[0];
// console.warn("1:加载用户配置")
this.columnInit()
this.columnInit();
}
if (!this.configLoad) {
this.easySearch()
this.easySearch();
}
this.configLoad = true
this.configLoad = true;
}
})
});
},
saveUserconfig() {
let url = `${window.systemUrl}/config/update`
var content = []
let url = `${window.systemUrl}/config/update`;
var content = [];
this.columnsCur.map((u) => {
content.push({
key: u.key,
hide: u.hide
})
})
hide: u.hide,
});
});
if (!this.userConfig) {
url = `${window.systemUrl}/config/create`
url = `${window.systemUrl}/config/create`;
var data = {
page: window.location.pathname,
component: 'Grid',
component: "Grid",
key: this.$u.guid(),
content: JSON.stringify(content)
}
content: JSON.stringify(content),
};
this.$api.post(url, data).then((r) => {
this.loadUserConfig()
})
this.loadUserConfig();
});
} else {
this.userConfig.content = JSON.stringify(content)
this.$api.post(url, this.userConfig)
this.userConfig.content = JSON.stringify(content);
this.$api.post(url, this.userConfig);
}
},
//展开
expand(row, status) {
this.$emit('on-expand', row, status)
this.$emit("on-expand", row, status);
},
//拖拽
onDragDrop(a, b) {
this.$emit('on-drag-drop', a, b)
this.$emit("on-drag-drop", a, b);
},
easySearch() {
if (this.conditions && this.conditions.keys.default) {
//判断没有传入条件的用默认的查询
this.conditions.keys.value = this.keys
this.conditions.keys.value = this.keys;
}
this.reload(this.conditions)
this.reload(this.conditions);
},
undoConfig() {
//列设置恢复初始化
this.columnsCur = this.$u.clone(this.columns)
this.saveUserconfig()
this.columnsCur = this.$u.clone(this.columns);
this.saveUserconfig();
},
complexSearch() {
var search = this.$refs.search.$children.filter((u) => {
return u.condition
})
return u.condition;
});
if (search) {
var conditions = search[0].condition
this.reload(conditions)
var conditions = search[0].condition;
this.reload(conditions);
}
},
reload(conditions) {
var where = []
var where = [];
if (conditions) {
Object.keys(conditions).forEach((u) => {
let v = conditions[u].value
let op = conditions[u].op
let v = conditions[u].value;
let op = conditions[u].op;
if (!this.$u.isNull(v)) {
if (op == 'Range') {
let times = []
if (op == "Range") {
let times = [];
v.map((u) => {
if (!this.$u.isNull(u)) {
times.push(this.$u.toTime(u))
times.push(this.$u.toTime(u));
}
})
v = times.join(',')
} else if (op.indexOf('In') > -1) {
v = v.join(',')
});
v = times.join(",");
} else if (op.indexOf("In") > -1) {
v = v.join(",");
}
if (!this.$u.isNull(v)) {
where.push({
fieldName: u,
fieldValue: v,
conditionalType: op
})
conditionalType: op,
});
}
}
})
});
}
this.search.pageIndex = 1
this.search.conditions = where
this.load()
this.search.pageIndex = 1;
this.search.conditions = where;
this.load();
},
pageChange(page) {
this.search.page = page
this.search.pageIndex = page
this.load()
this.search.page = page;
this.search.pageIndex = page;
this.load();
},
pageSizeChange(size) {
this.search.pageSize = size
this.search.pageIndex = 1
this.load()
this.search.pageSize = size;
this.search.pageIndex = 1;
this.load();
},
columnChange(item, i) {
item.hide = !item.hide
this.$set(this.columnsCur, item, i)
this.saveUserconfig()
item.hide = !item.hide;
this.$set(this.columnsCur, item, i);
this.saveUserconfig();
},
selectionChange(items) {
this.$emit('on-selection-change', items)
this.selectItems = items
this.footerToolbar = items.length > 0
this.$emit("on-selection-change", items);
this.selectItems = items;
this.footerToolbar = items.length > 0;
},
onSelect(rows, row) {
this.$emit('on-selection-change', rows, row)
this.$emit("on-selection-change", rows, row);
},
intY() {
if (this.$refs.table != undefined) {
this.firstY = this.$refs.table.$el.getBoundingClientRect().top
this.firstY = this.$refs.table.$el.getBoundingClientRect().top;
}
},
selectAll(status) {
this.$refs.table.selectAll(status)
}
this.$refs.table.selectAll(status);
},
},
computed: {
columnsNow() {
var cols = this.columnsCur.filter((u) => {
if (u.code) {
u.render = (h, params) => {
let values = u.key
let type = 'text'
let values = u.key;
let type = "text";
if (u.category) {
type = u.category
type = u.category;
}
return h('state', {
return h("state", {
props: {
code: u.code,
type: type,
value: params.row[values] + ''
}
})
}
value: params.row[values] + "",
},
});
};
}
if (u.type == 'user') {
if (u.type == "user") {
u.render = (h, params) => {
let values = u.key
return h('User', {
let values = u.key;
return h("User", {
props: {
value: params.row[values]
}
})
}
value: params.row[values],
},
});
};
}
if (u.type == 'date' || u.type == 'dateTime') {
if (u.type == "date" || u.type == "dateTime") {
u.render = (h, params) => {
let values = u.key
return h('DTSpan', {
let values = u.key;
return h("DTSpan", {
props: {
type: u.type,
value: params.row[values]
}
})
}
}
return !u.hide
})
return cols
value: params.row[values],
},
});
};
}
return !u.hide;
});
return cols;
},
watch:{
"data.length"(){
this.list=this.data;
},
"height"()
{
this.tableHeight=this.height;
}
}
}
watch: {
"data.length"() {
this.list = this.data;
},
height() {
this.tableHeight = this.height;
},
},
};
</script>
<style lang="less" scoped>
......@@ -515,7 +522,6 @@ export default {
// height: 100%;
.tableCommon {
width: 100%;
}
.tip {
display: inline;
......
libs/henq.js
View file @ 9732195b
......@@ -207,7 +207,7 @@ henq.getNowTime = () => {
return year + month + date + hours + minutes + seconds;
}
//读取本地excel
henq.readXLSX=(file)=>{
henq.readXLSX = (file) => {
let nameSplit = file.name.split(".");
let format = nameSplit[nameSplit.length - 1];
if (!["xlsx", "csv"].includes(format)) {
......@@ -218,31 +218,41 @@ henq.readXLSX=(file)=>{
reader.readAsBinaryString(file);
reader.onload = function (evt) {
let data = evt.target.result; // 读到的数据
var workbook = XLSX.read(data, { type: "binary" });
var workbook = XLSX.read(data, {
type: "binary"
});
resolve(workbook);
};
});
}
//得到根据value得到对应数据字典的name
henq.dirName=(code,v)=>{
var items=""
henq.dirName = (code, v) => {
var items = ""
let i = 0
code.forEach(ele => {
if(ele.code==v)
{
items=ele.name
if (ele.code == v) {
items = ele.name
i++
}
});
if (i == 0) { //如果没查到对应的name，则返回默认name
items = code[0].name
}
return items
}
//得到根据name得到对应数据字典的code
henq.dirCode=(code,v)=>{
var items=""
henq.dirCode = (code, v) => {
var items = ""
let i = 0
code.forEach(ele => {
if(ele.name==v)
{
items=ele.code
if (ele.name == v) {
items = ele.code
i++
}
});
if (i == 0) { //如果没查到对应的name，则返回默认name
items = code[0].code
}
return items
}
export default henq;
pages/basicData/user/index.vue
View file @ 9732195b
......@@ -125,10 +125,11 @@
<DataGrid
border
:height="tdHeightExcel"
:columns="columnImport"
:columns="columnsImport"
:data="excelData"
:tool="false"
:page="false"
:set="false"
></DataGrid>
<div slot="footer">
<span v-if="excelData.length>0">共 {{excelData.length}} 条数据</span>
......@@ -279,7 +280,7 @@ export default {
align: "left",
easy: true,
high: true,
hide:true,
hide: true,
render: (h, params) => {
return h("div", { class: "action" }, [
h(
......@@ -302,26 +303,6 @@ export default {
]);
},
},
{
key: "creatorUserId",
title: this.l("creatorUserId"),
align: "left",
},
{
key: "creationTime",
title: this.l("creationTime"),
align: "left",
},
{
key: "lastModifierUserId",
title: this.l("lastModifierUserId"),
align: "left",
},
{
key: "lastModificationTime",
title: this.l("lastModificationTime"),
align: "left",
},
{
key: "accountId",
title: this.l("accountId"),
......@@ -367,11 +348,40 @@ export default {
high: true,
code: "User.base.jobtitle",
},
{
key: "creatorUserId",
title: this.l("creatorUserId"),
align: "left",
import: false,
hide: true,
},
{
key: "creationTime",
title: this.l("creationTime"),
align: "left",
import: false,
hide: true,
},
{
key: "lastModifierUserId",
title: this.l("lastModifierUserId"),
align: "left",
import: false,
hide: true,
},
{
key: "lastModificationTime",
title: this.l("lastModificationTime"),
align: "left",
import: false,
hide: true,
},
{
title: "操作",
key: "action",
width: 180,
align: "right",
import: false,
render: (h, params) => {
return h("div", { class: "action" }, [
h(
......@@ -417,7 +427,7 @@ export default {
],
selectRow: {}, //删除时选中的行数据
//导入导出时使用start
formatList: ['xlsx'],
formatList: ["xlsx"],
searchs: {
pageIndex: 1,
pageSize: 1000,
......@@ -426,133 +436,9 @@ export default {
list: [],
modalImport: false,
excelData: [],
columnImport: [
{
key: "userName",
title: this.l("userName"),
align: "left",
easy: true,
high: true,
},
{
key: "cardNo",
title: this.l("cardNo"),
align: "left",
easy: true,
high: true,
},
{
key: "gender",
title: this.l("gender"),
align: "center",
high: true,
code: "User.base.gender",
},
{
key: "birthday",
title: this.l("birthday"),
align: "center",
high: true,
type: "date",
},
{
key: "degreeId",
title: this.l("degreeId"),
align: "left",
high: true,
code: "User.base.degree",
},
{
key: "status",
title: this.l("status"),
align: "center",
high: true,
code: "User.base.status",
},
{
key: "departmentId",
title: this.l("departmentId"),
align: "right",
easy: true,
high: true,
},
{
key: "departmentTitle",
title: this.l("departmentTitle"),
align: "left",
easy: true,
high: true,
},
// {
// key: "roleTitles",
// title: this.l("roleTitles"),
// align: "left",
// easy: true,
// high: true,
// },
{
key: "accountId",
title: this.l("accountId"),
hide: true,
align: "left",
},
{
key: "phone",
title: this.l("phone"),
align: "left",
easy: true,
high: true,
},
{
key: "email",
title: this.l("email"),
align: "left",
easy: true,
high: true,
},
{
key: "licensedToWork",
title: this.l("licensedToWork"),
align: "left",
},
{
key: "positionId",
title: this.l("positionId"),
align: "left",
high: true,
code: "User.base.position",
},
{
key: "titleId",
title: this.l("titleId"),
align: "left",
high: true,
code: "User.base.jobtitle",
},
// {
// key: "creatorUserId",
// title: this.l("creatorUserId"),
// align: "left",
// type: "user",
// },
// {
// key: "creationTime",
// title: this.l("creationTime"),
// align: "left",
// },
// {
// key: "lastModifierUserId",
// title: this.l("lastModifierUserId"),
// align: "left",
// type: "user",
// },
// {
// key: "lastModificationTime",
// title: this.l("lastModificationTime"),
// align: "left",
// },
],
departArr: [], //部门list
columnsImport: [],
//导入导出时使用end
};
},
......@@ -560,6 +446,15 @@ export default {
this.treeHeight = window.innerHeight - 150;
this.tdHeight = window.innerHeight - 240;
this.tdHeightExcel = window.innerHeight - 240;
//导出对列表头进行预加载start
let tempCol = this.$u.clone(this.columns);
tempCol.forEach((ele, index) => {
if (ele.key == "action") {
ele.hide = true;
}
});
this.columnsImport = tempCol;
//导出对列表头进行预加载end
},
mounted() {
window.onresize = () => {
......@@ -832,9 +727,9 @@ export default {
const tHeader = []; // 设置Excel的表格第一行的标题
const filterVal = []; //list里对象的属性
var tempCol = [];
var columnsCur = this.columns; //导出列标题信息griddata this.$refs.grid.columnsCur
var columnsCur = this.$u.clone(this.columns); //导出列标题信息griddata this.$refs.grid.columnsCur
columnsCur.forEach((el) => {
if (!el.hide && el.key != "action") {
if ((el.hide && !el.import) || (!el.hide && el.key != "action")) {
if (el.code) {
//tHeader.push(el.key + "DirName");
//filterVal.push(el.key + "DirName");
......@@ -873,31 +768,55 @@ export default {
ApiDepart.getpaged().then((r) => {
this.departArr = r.result.items;
});
console.log(this.columnImport)
},
//导入excel文件
async beforeUpload(file) {
this.excelData = [];
this.$refs.uploadfile.clearFiles(); //清除上一次上传文件列表
var tempColums = this.$u.clone(this.columnsImport);
const workbook = await this.$u.readXLSX(file);
const sheet2JSONOpts = {
defval: "", //给defval赋值为空的字符串
};
var tempList = XLSX.utils.sheet_to_json(
var csv = XLSX.utils.sheet_to_csv(
workbook.Sheets[workbook.SheetNames[0]],
sheet2JSONOpts
);
this.$refs.uploadfile.clearFiles();//清除上一次上传文件列表
var lines = csv.split("\n"); //第一行标题
var headers = lines[0].split(",");
var arrTi = [];
//转换到colum后的list表头start
headers.forEach((elHead) => {
tempColums.forEach((elCol) => {
if (elHead == elCol.title) {
//elHead=elCol.key
arrTi.push(elCol.key);
}
});
});
headers = arrTi;
//转换到colum后的list表头end
var result = [];
for (var i = 1; i < lines.length - 1; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//对读取的excel文件数据进行处理
var tempColums = tempList[0]; //必须保证excel第一行数据行DirName有数据值，否则取不到所有的标题
var arrTitle = Object.keys(tempColums);
var arrTitleUse = []; //使用数据字典的字段
arrTitle.forEach((el) => {
if (el.indexOf("DirName") != -1) {
arrTitleUse.push({ name: el, val: el.substring(0, el.length - 7) });
tempColums.forEach((elCode) => {
if (elCode.code) {
arrTitleUse.push({ key: elCode.key, code: elCode.code });
}
});
tempList.forEach((ele) => {
result.forEach((ele) => {
//如果导入文件没有departmentid，但存在departmentTitle的话，通过title获取id
if (
ele.departmentTitle &&
......@@ -909,7 +828,8 @@ export default {
ele.departmentId = e.id;
}
});
} else if (//如果导入文件没有departmentTitle，但存在departmentid的话，通过id获取departmentTitle
} else if (
//如果导入文件没有departmentTitle，但存在departmentid的话，通过id获取departmentTitle
ele.departmentId &&
ele.departmentId + "" != "" &&
(!ele.departmentTitle || ele.departmentTitle == "")
......@@ -923,29 +843,17 @@ export default {
//对列表里的数据字典项进行处理
arrTitleUse.forEach((elem) => {
if (!ele[elem.val] || ele[elem.val] == "" || ele[elem.val] == null) {
this.columnImport.forEach((co) => {
if (co.key == elem.val) {
if (ele[elem.name]) {
if (ele[elem.key] && ele[elem.key] != "" && ele[elem.key] != null) {
//如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值
ele[elem.val] = this.$u.dirCode(
this.$store.getters.dictionaryByKey(co.code),
ele[elem.name]
ele[elem.key] = this.$u.dirCode(
this.$store.getters.dictionaryByKey(elem.code),
ele[elem.key]
);
} else {
//如果对应的DirName不存在，则赋值此字段对应的数据字典项对应的第一个默认值
ele[elem.val] = this.$store.getters.dictionaryByKey(
co.code
)[0].code;
}
}
});
}
});
});
this.excelData = tempList;
console.log(workbook);
this.excelData = result;
//console.log(workbook);
return false;
},
//确定批量导入
......@@ -989,6 +897,70 @@ export default {
this.excelData = [];
this.$refs.uploadfile.clearFiles();
},
//旧方法，设置dirname，通过取excel第一行的数据定义colums
async beforeUploadOld(file) {
this.excelData = [];
this.$refs.uploadfile.clearFiles(); //清除上一次上传文件列表
const workbook = await this.$u.readXLSX(file);
const sheet2JSONOpts = {
defval: "", //给defval赋值为空的字符串
};
var tempList = XLSX.utils.sheet_to_json(
workbook.Sheets[workbook.SheetNames[0]],
sheet2JSONOpts
);
//对读取的excel文件数据进行处理
var tempColums = this.$u.clone(this.columnsImport);
var arrTitles = Object.keys(tempList[0]); //获取列表title
var arrTitleUse = []; //使用数据字典的字段
tempColums.forEach((elCode) => {
if (elCode.code) {
arrTitleUse.push({ key: elCode.key, code: elCode.code });
}
});
tempList.forEach((ele) => {
//如果导入文件没有departmentid，但存在departmentTitle的话，通过title获取id
if (
ele.departmentTitle &&
ele.departmentTitle != "" &&
(!ele.departmentId || ele.departmentId == "")
) {
this.departArr.forEach((e) => {
if (ele.departmentTitle && ele.departmentTitle == e.name) {
ele.departmentId = e.id;
}
});
} else if (
//如果导入文件没有departmentTitle，但存在departmentid的话，通过id获取departmentTitle
ele.departmentId &&
ele.departmentId + "" != "" &&
(!ele.departmentTitle || ele.departmentTitle == "")
) {
this.departArr.forEach((e) => {
if (ele.departmentId && ele.departmentId == e.id) {
ele.departmentTitle = e.name;
}
});
}
//对列表里的数据字典项进行处理
arrTitleUse.forEach((elem) => {
if (ele[elem.key] && ele[elem.key] != "" && ele[elem.key] != null) {
//如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值
ele[elem.key] = this.$u.dirName(
this.$store.getters.dictionaryByKey(elem.code),
ele[elem.key]
);
}
});
});
this.excelData = tempList;
console.log(workbook);
return false;
},
},
computed: {
searchList() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment