Skip to content

H
hs-sky-ui
Commit 9059f971 authored by 何虹's avatar 何虹 💬
Browse files
Options

优化表格当前行

parent 60aeb175
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 172 deletions
src/components/HelloWorld copy.vue 0 → 100644
View file @ 9059f971
<template>
<div style="width:500px">
<hsFile
v-model="value"
:allSourceData='allSourceData'
:uploadFileFun='uploadFileFun_'
>
</hsFile>
<div>{{value}}</div>
</div>
</template>
<script>
import apiUc from "./apiUc";
export default {
mixins: [apiUc],
data() {
return {
value: "",
formData: {
test_p: ""
},
allSourceData: {
config: {
appCode: "PBOrg",
multiple: true,
label: "附件",
accept: ".xls,.doc,.txt,.pdf,.jpg",
uploaded: v => {
console.log(v, "sadas");
console.log(this.value);
}
},
sourceData: []
}
};
},
mounted() {},
methods: {
uploadFileFun_(formData) {
return this.uploadFileFun("PBOrg", formData);
},
printResult() {
console.log(this.formData);
}
}
};
</script>
<style scoped>
.codeTxt {
text-align: left;
}
</style>
\ No newline at end of file
src/components/HelloWorld.vue
View file @ 9059f971
<template>
<div style="width:500px">
<hsSelectPlus
v-model="formData.test_p"
<div>
<hsTable
maxHeight='500px'
:allSourceData='allSourceData'
:requestMethod='requestMethod'
:writeBackObject='formData'
></hsSelectPlus>
></hsTable>
</div>
</template>
<script>
import apiUc from "./apiUc";
......@@ -15,54 +12,118 @@ export default {
mixins: [apiUc],
data() {
return {
formData: {
test_p: ""
},
allSourceData: {
config: {
url: "",
isInnerRequest: true, // 静态查询时 是否在内部请求数据
proxyTag: "commonUtilAPI", //代理前缀
ref: {
const_id: "0", // 常量id
table_name: "mmMaterialCategory", // 表名
columns: "id,material_category", // 查询列
remote_condition: "material_category", // 远程搜索字段
displayfield: "", // 显示默认值
writebackfield: [] // 回写对象
highlightCurrentRow:false,
hover:{hoverBackground:'',leaveBackground:''},
showIndex: false, // 是否显示 序号
hsConfig: {
default_type: 1 // mes风格
},
multiple: false,
is_computed: false,
disabled: false,
size: "mini",
clearable: true,
title: "",
placeholder: "",
value: "id",
label: "material_category",
linkBtnUi: {
url:
"http://47.110.145.204:59168/queryBi/web//#/DyncUI/Single/PBArchive/pb_unit",
writeProp: {
test_p: "unit_name" // 后面这个值是弹出页面返回过来的字段,回写给writeBackObject中的某个属性
showHandle: true, // 是否显示操作栏
selection: true, // 是否显示复选框
handleWidth: 180, // 操作栏宽度
isAdaptive: true, // 宽度自适应
toolItems: [
// 工具栏
{
label: "测试2",
icon: "",
type: "text",
isHide: false, // 是否隐藏
disabled: false, // 是否禁用
click: () => {
alert("测试2");
}
}
],
handleColumns: [
// 操作栏
{
label: "测试1",
icon: "",
isHide: false, // 是否隐藏
type: "text",
disabled: false, // 是否禁用
click: () => {
alert("测试");
}
},
parms: {}
}
{
label: "测试2",
icon: "",
isHide: false, // 是否隐藏
type: "text",
disabled: false, // 是否禁用
click: () => {
this.allSourceData.sourceData.push({});
}
}
],
columnsConfig: [
// 列信息
{
prop: "order_size", //对应后端的字段
label: "型号", // 列名
showOverflowTooltip: true, // 超出时 显示省略
showType: "hsSelectPlus", // 列类型
allSourceData: {
// 参照配置
config: {
url: "",
isInnerRequest: true, // 是否在内部请求
proxyTag: "commonUtilAPI", // 代理前缀
ref: {
const_id: "0", // 常量值
table_name: "im_store_group", // 表名
columns: "id,name", //列名
remote_condition: "", // 是否远程搜索
displayfield: "", // 显示默认值
writebackfield: [] //回写字段
},
dyncQueryParms: {}, // 查询参数
multiple: false, // 是否多选
disabled: false,
size: "mini",
clearable: true,
title: "",
placeholder: "请选择",
value: "id", // 对应的后端字段
label: "name", // 对应的后端字段
is_computed: false // 是否是计算属性
},
sourceData: []
},
requestMethod: this.requestMethod // 参照请求方法
},
{
prop: "style_code",
label: "款号",
showOverflowTooltip: true,
showType: "input" // 普通输入框
},
{
prop: "customer_name",
label: "客户",
showOverflowTooltip: true,
showType: "text" // 文本
}
]
},
sourceData: [] // [{value:'',lable:''}] 的形式
sourceData: []//表格数据
}
};
},
mounted() {},
mounted() {
this.init();
},
methods: {
printResult() {
console.log(this.formData);
init() {
this.allSourceData.sourceData = [
{ customer_name: 1, style_code: 2, order_size: "0",_styleRowSetting_:{"color":"blue","background":"red"} },
{ customer_name: 1, style_code: 2, order_size: "0",_styleRowSetting_:{"color":"blue","background":"blue"} }
];
}
}
};
</script>
<style scoped>
.codeTxt {
text-align: left;
}
</style>
\ No newline at end of file
</script>
\ No newline at end of file
src/components/apiUc.js
View file @ 9059f971
......@@ -104,6 +104,9 @@ export default {
return url
}
}
},
uploadFileFun(appCode,formData) {
return axios.post(`fileresourceAPI/file/${appCode}/`, formData)
}
},
}
src/packages/hs-file/index.vue
View file @ 9059f971
......@@ -10,7 +10,10 @@
<!-- <el-link el-icon-view @click="dialogVisible=true"> 附件📎</el-link> -->
<el-link @click="dialogVisible=true">
<div class="showTxt">
<p class="showFiletxt" v-show="fileName">{{fileName}}</p>
<p
class="showFiletxt"
v-show="fileName"
>{{fileName}}</p>
<div>{{configData.label}}
<i class="el-icon-s-operation el-icon--right"></i>
</div>
......@@ -157,30 +160,33 @@
</template>
<script>
import ucComponent from '../ucClass/uc_component'
import jsoneditor from '../common/jsoneditor'
import commonUtility from '../funTools/commonUtility'
import _ from 'lodash'
import ucComponent from "../ucClass/uc_component";
import jsoneditor from "../common/jsoneditor";
import commonUtility from "../funTools/commonUtility";
import _ from "lodash";
export default {
mixins: [ucComponent],
components: {
jsoneditor
},
name: 'hsFile',
name: "hsFile",
props: {
uploadFileFun: {
type: Function
},
allSourceData: {
type: Object,
default() {
return {}
return {};
}
},
elInfo: {
type: Object,
default() {
return {}
return {};
}
},
value: '',
value: "",
layout: {},
jsoneditorCloseAfter: {
type: Function
......@@ -192,42 +198,35 @@ export default {
watch: {
allSourceData: {
handler: function(newVal, oldVal) {
const { config } = newVal
this.initConfig(config)
const { config } = newVal;
this.initConfig(config);
},
deep: true
},
value(val) {
this.value_inner = val
this.initData()
this.value_inner = val;
this.initData();
},
value_inner(val) {
this.$emit('input', val)
this.$emit("input", val);
},
fileList: {
handler: function(newVal, oldVal) {
this.changeBtnStatus(newVal)
this.changeBtnStatus(newVal);
},
deep: true
},
newFileList: {
handler: function(newVal, oldVal) {
const data = _.cloneDeep(newVal)
data.forEach(item => {
delete item.fileListImage
delete item.file
delete item.name
})
this.value_inner = JSON.stringify(data)
// this.changeBtnStatus(data)
this.initValue(newVal);
},
deep: true
}
},
data() {
return {
elId: '',
value_inner: '',
elId: "",
value_inner: "",
jsoneditorVisible: false,
sourceData: [],
visible_popover: false,
......@@ -241,93 +240,93 @@ export default {
multiple: true,
configData: {
multiple: true,
accept: '*',
appCode: '',
label: '查看附件'
accept: "*",
appCode: "",
label: "查看附件"
},
appCode: '',
appCode: "",
hideInput: false,
fileName: ''
}
fileName: ""
};
},
mounted() {
this.$nextTick(() => {
const { config } = this.allSourceData
this.initConfig(config)
})
// const exitImage = localStorage['exitImage']
// if(this.value){
// const data=JSON.parse(this.value)
// }
// console.log(this.value, 'append-to-body')
// this.initData()
const { config } = this.allSourceData;
this.initConfig(config);
});
},
methods: {
initValue(newVal) {
const data = _.cloneDeep(newVal);
data.forEach(item => {
delete item.fileListImage;
delete item.file;
delete item.name;
});
this.value_inner = JSON.stringify(data);
},
changeBtnStatus(data) {
if (data.length >= 1) {
this.hideInput = true
this.hideInput = true;
} else {
this.hideInput = false
this.hideInput = false;
}
},
openDialog() {
this.initData()
this.initData();
},
initData() {
if (this.value) {
this.newFileList = JSON.parse(this.value)
const { config } = this.allSourceData
this.initConfig(config)
const appCode_ = this.configData.appCode
const { appCode } = commonUtility.parseUrlQueryBIDyncAppcodePageName()
const appCode__ = appCode_ || appCode
this.appCode = appCode__
this.newFileList.forEach(item => {
const { NewFileName } = item
this.$set(
item,
'file',
`fileresourceAPI/file/${appCode__}/${NewFileName}/`
)
this.$set(item, 'fileListImage', [
`fileresourceAPI/file/${appCode__}/${NewFileName}/`
])
})
// this.changeBtnStatus(this.newFileList)
}
this.newFileList = this.value ? JSON.parse(this.value) : [];
const { config } = this.allSourceData;
this.initConfig(config);
this.newFileList.forEach(item => {
const { NewFileName } = item;
this.$set(
item,
"file",
`fileresourceAPI/file/${this.appCode}/${NewFileName}/`
);
this.$set(item, "fileListImage", [
`fileresourceAPI/file/${this.appCode}/${NewFileName}/`
]);
});
},
initConfig(config = {}) {
this.configData = Object.assign(this.configData, config)
const { multiple } = this.configData
this.configData = Object.assign(this.configData, config);
const appCode_ = this.configData.appCode;
const { appCode } = commonUtility.parseUrlQueryBIDyncAppcodePageName();
const appCode__ = appCode_ || appCode;
this.appCode = appCode__;
const { multiple } = this.configData;
if (!multiple && this.newFileList.length) {
this.fileName = this.newFileList[0].OldFileName
this.fileName = this.newFileList[0].OldFileName;
}
},
handleClose(done) {
this.$confirm('确认关闭？')
this.$confirm("确认关闭？")
.then(_ => {
done()
done();
})
.catch(_ => {})
.catch(_ => {});
},
imgPreview(file) {
const self = this
const self = this;
// 看支持不支持FileReader
if (!file || !window.FileReader) return
if (!file || !window.FileReader) return;
// 创建一个reader
const reader = new FileReader()
const reader = new FileReader();
// 将图片将转成 base64 格式
reader.readAsDataURL(file)
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onloadend = function() {
const type = file.type
const type = file.type;
if (/^image/.test(type)) {
self.fileListImage.push(this.result)
self.fileListImage.push(this.result);
} else {
self.fileListNoImage.push({
name: file.name
})
});
}
self.fileList.push({
type: file.type,
......@@ -336,69 +335,71 @@ export default {
file: this.result,
fileBrod: file,
previewList: [this.result]
})
}
});
};
},
handleFileChange(e) {
const inputDOM = document.getElementById('avatar')
this.file = inputDOM.files[0]
this.files = Array.from(inputDOM.files)
const inputDOM = document.getElementById("avatar");
this.file = inputDOM.files[0];
this.files = Array.from(inputDOM.files);
// 在获取到文件对象进行预览就行了！
this.files.forEach(item => {
this.imgPreview(item)
})
this.imgPreview(item);
});
// 清除当前input 值
e.target.value = ''
e.target.value = "";
},
deleteCurrImage(image, index) {
this.fileList.splice(index, 1)
this.fileList.splice(index, 1);
},
preview(item, index) {
const { name } = item
this.$set(item, 'file', `fileresourceAPI/file/${this.appCode}/${name}/`)
this.$set(item, 'fileListImage', [
const { name } = item;
this.$set(item, "file", `fileresourceAPI/file/${this.appCode}/${name}/`);
this.$set(item, "fileListImage", [
`fileresourceAPI/file/${this.appCode}/${name}/`
])
]);
},
deleteFile(item, index) {
this.fileList.splice(index, 1)
this.fileList.splice(index, 1);
},
deleteExitFile(item, index) {
this.newFileList.splice(index, 1)
this.newFileList.splice(index, 1);
},
async upload() {
const formData = new FormData()
const formData = new FormData();
if (!this.fileList.length) {
this.$message.error('请选择文件!')
return
this.$message.error("请选择文件!");
return;
}
const { multiple } = this.configData
const { multiple } = this.configData;
if (!multiple) {
if (this.newFileList.length >= 1) {
this.$message.error('仅支持单文件上传,请手动删除服务器文件后再试!')
return
this.$message.error("仅支持单文件上传,请手动删除服务器文件后再试!");
return;
}
}
this.fileList.forEach(element => {
const { NewFileName, fileBrod } = element
formData.append(NewFileName, fileBrod)
})
const newFileList = []
const res = await this.$API.uploadFile(formData)
const { NewFileName, fileBrod } = element;
formData.append(NewFileName, fileBrod);
});
const newFileList = [];
const res = await this.uploadFileFun(formData);
const resData = (res.data || []).filter(item => {
return item.Sucess
})
return item.Sucess;
});
const resDataError = (res.data || []).filter(item => {
return !item.Sucess
})
let errorStr = ''
return !item.Sucess;
});
let errorStr = "";
resDataError.forEach(jtem => {
const { Error, OldFileName } = jtem
errorStr += `${OldFileName}:${Error}`
})
const { Error, OldFileName } = jtem;
errorStr += `${OldFileName}:${Error}`;
});
if (errorStr) {
this.$message.error(errorStr)
this.$message.error(errorStr);
}
console.log(this.appCode);
resData.forEach(item => {
newFileList.push({
OldFileName: item.OldFileName,
......@@ -407,20 +408,24 @@ export default {
fileListImage: [
`fileresourceAPI/file/${this.appCode}/${item.NewFileName}/`
]
})
});
const targetIndex = this.fileList.findIndex(
item_ => item_.NewFileName === item.OldFileName
)
this.fileList.splice(targetIndex, 1)
})
this.newFileList.push(...newFileList)
);
this.fileList.splice(targetIndex, 1);
});
this.newFileList.push(...newFileList);
if (!multiple && this.newFileList.length) {
this.fileName = this.newFileList[0].OldFileName
this.fileName = this.newFileList[0].OldFileName;
}
const { uploaded } = this.configData;
if (typeof uploaded === "function") {
uploaded(this.newFileList);
}
localStorage['exitImage'] = JSON.stringify(this.newFileList)
localStorage["exitImage"] = JSON.stringify(this.newFileList);
}
}
}
};
</script>
<style scoped>
.file {
......@@ -540,7 +545,7 @@ export default {
color: red;
margin-right: 5px;
}
.showFiletxt{
height: 18px;
.showFiletxt {
height: 18px;
}
</style>
src/packages/hs-select-plus/index.vue
View file @ 9059f971
......@@ -278,7 +278,6 @@ export default {
this.dialogIframeVisible = false;
},
linkBtnUiBack(data) {
debugger;
const linkBtnUi = this.configData.linkBtnUi;
if (!linkBtnUi) return;
const writeProp = linkBtnUi.writeProp || {};
......@@ -510,7 +509,6 @@ export default {
},
select_focus(event) {
const { remote_condition } = this.configData.ref;
debugger;
if (remote_condition && !this.is_mock) {
this.remoteMethod_();
}
......
src/packages/hs-table/index.vue
View file @ 9059f971
......@@ -45,7 +45,7 @@
:data="this.tableData"
:style="tableStyle"
:fit='true'
:highlight-current-row=true
:highlight-current-row='configData.highlightCurrentRow'
:show-summary='showSummary'
:header-row-style="setHeaderRowStyle"
:header-cell-style="setHeaderCellStyle"
......@@ -483,7 +483,8 @@ export default {
tableDataFirst: null, // table[0]第一行数据
hsDyncProp: false, // 是否含有动态列
targetRowInner: {}, // 当前行
dtlDialogFormDisAbled: false
dtlDialogFormDisAbled: false,
highlightCurrentRow:true
};
},
watch: {
......@@ -1560,6 +1561,7 @@ export default {
},
// 鼠标移入事件
tableCellmouse(row, column, cell, event) {
return
if (this.configData.hover) {
const { hoverBackground } = this.configData.hover;
if (hoverBackground) {
......
src/packages/hs-table/mes_style.js
View file @ 9059f971
......@@ -3,6 +3,7 @@ export default {
background: 'red'
},
'showHandle': false,
highlightCurrentRow:true,
handleWidth: 80,
selection: false,
showIndex: true,
......
vue.config.js
View file @ 9059f971
......@@ -68,6 +68,13 @@ module.exports = {
'^/api': ''
}
},
'/fileresourceAPI': {
target: fileresourceAPI,
changeOrigin: true,
pathRewrite: {
'^/fileresourceAPI': ''
}
},
'/commonUtilAPI': {
target: commonUtilAPI,
changeOrigin: true,
......
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