98 lines
3.2 KiB
Vue
98 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<x-avatar v-if="item.columntype=='avatar' || item.component=='avatar'" :name="item.name" :options="item.options" v-model="row"></x-avatar>
|
|
<el-badge v-else-if="item.columntype=='badge' || item.columntype=='imagegroup'" :value="getType(row[item.name])" :type="item.options.type || 'warning'"></el-badge>
|
|
<el-image v-else-if="item.columntype=='image'" :preview-src-list="[getImg(row[item.name])]" :preview-teleported="true" hide-on-click-modal="true" lazy="true" style="max-width: 60px; height: 26px; border-radius: 2px;" fit="cover" :src="getImg(row[item.name])">
|
|
<template #error>
|
|
<div class="image-slot">
|
|
无图
|
|
</div>
|
|
</template>
|
|
</el-image>
|
|
|
|
<input v-else-if="item.columntype=='input'" @click="handleClick(row, item)" style="cursor: pointer; " class="el-input__inner" type="text" readonly :value="row[item.name]">
|
|
|
|
<p v-else-if="item.columntype=='status'">
|
|
<x-status-indicator @click="handleClick(row, item)" v-for="op in item.options.items" :key="op.value" pulse :type="op.type || 'success'" :label="op.label" v-show="op.value==row[item.name]">
|
|
</x-status-indicator>
|
|
</p>
|
|
|
|
<p v-else-if="item.columntype=='button' && item.options.items && item.options.items.length>0">
|
|
<el-button @click="handleClick(row, item)" v-for="op in item.options.items" :key="op.value" :type="op.type || 'warning'" style="margin: 0;" :size="op.size || 'small'" :link="op.link" :icon="op.icon" v-show="op.value==row[item.name]">
|
|
{{ op.label }}
|
|
</el-button>
|
|
</p>
|
|
|
|
<p v-else-if="item.columntype=='button'">
|
|
<el-button @click="handleClick(row, item)" :type="item.options.type || 'warning'" :size="item.options.size || 'small'" :icon="item.options.icon">
|
|
{{ row[item.name] }}
|
|
</el-button>
|
|
</p>
|
|
|
|
<p v-else-if="item.columntype=='tag'" @click="handleClick(row, item)" v-time.tip="row[item.name]"></p>
|
|
|
|
<slot v-else :name="item.name" v-bind="scope">
|
|
{{ item.columntype=='select' && item.options && item.options.items ? getNameByValue( row[item.name], item.options.items ) : row[item.name] }}
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
name: 'xTablecolumnitem',
|
|
props: {
|
|
item: { type: Object, default: () => {} },
|
|
modelValue: { type: Array, default: () => [] },
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
computed: {
|
|
},
|
|
data() {
|
|
return {
|
|
row : this.modelValue,
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
handleClick(row, item){
|
|
|
|
// 打开编辑层
|
|
if (item.update && (item.update.url || item.update.name)) {
|
|
this.$emit('xtableupdate', row, {
|
|
name:item.update.name || item.name,
|
|
remoteurl: item.update.url || 'system/table/getUpdate?name='+item.update.name
|
|
}, item.update.type || 'dialog');
|
|
return ;
|
|
}
|
|
|
|
// 打开表格
|
|
if (item.update && (item.update.url || item.update.name)) {
|
|
return ;
|
|
}
|
|
},
|
|
getType(value) {
|
|
if (Array.isArray(value)) {
|
|
return value.length;
|
|
}
|
|
return value;
|
|
},
|
|
getNameByValue (value, degrees) {
|
|
const degree = degrees.find(degree => degree.value === value);
|
|
return degree ? (degree.name?degree.name:degree.label) : value;
|
|
},
|
|
|
|
getImg(o){
|
|
if (!o) {
|
|
return ;
|
|
}
|
|
return typeof o === 'string'? o : o.url;
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|