dataease-dm/frontend/src/views/panel/list/SaveToTemplate.vue

151 lines
3.9 KiB
Vue

<template>
<el-row>
<el-row style="display: flex;align-items: center;">
<el-col :span="4"> {{ $t('panel.template_nale') }}</el-col>
<el-col :span="20">
<el-input v-model="templateInfo.name" clearable size="mini" />
</el-col>
</el-row>
<el-row class="de-tab">
<div class="my_table">
<el-table
ref="table"
:data="data.filter(node => !keyWordSearch || node[fieldName].toLowerCase().includes(keyWordSearch.toLowerCase()))"
style="width: 100%"
:row-style="{height: '35px'}"
highlight-current-row
@current-change="clickChange"
>
<el-table-column :label="columnLabel" :column-key="fieldName" :prop="fieldName" />
<el-table-column align="right">
<template slot-scope="scope">
<el-radio v-model="tableRadio" :label="scope.row"><i /></el-radio>
</template>
</el-table-column>
</el-table>
</div>
</el-row>
<el-row class="root-class">
<el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
<el-button size="mini" type="primary" @click="save()">{{ $t('commons.save') }}</el-button>
</el-row>
</el-row>
</template>
<script>
import { save, nameCheck, showTemplateList } from '@/api/system/template'
export default {
name: 'SaveToTemplate',
props: {
templateInfo: {
type: Object
}
},
data() {
return {
data: [],
fieldName: 'name',
tableRadio: null,
keyWordSearch: '',
columnLabel: this.$t('panel.belong_to_category')
}
},
created() {
this.search()
},
methods: {
search() {
const param = {
templateType: 'self',
level: '0'
}
showTemplateList(param).then(response => {
this.data = response.data
})
},
clickChange(item) {
this.tableRadio = item
this.templateInfo.pid = item.id
},
cancel() {
this.$emit('closeSaveDialog')
},
save() {
if (!this.templateInfo.pid) {
this.$warning(this.$t('panel.pls_select_belong_to_category'))
return false
}
if (!this.templateInfo.name) {
this.$warning(this.$t('panel.template_name_cannot_be_empty'))
return false
}
const nameCheckRequest = {
pid: this.templateInfo.pid,
name: this.templateInfo.name,
optType: 'insert'
}
nameCheck(nameCheckRequest).then(response => {
if (response.data.indexOf('exist') > -1) {
this.$confirm(this.$t('template.exit_same_template_check'), this.$t('template.confirm_upload'), {
confirmButtonText: this.$t('template.override'),
cancelButtonText: this.$t('template.cancel'),
type: 'warning'
}).then(() => {
save(this.templateInfo).then(response => {
this.$message({
message: this.$t('commons.save_success'),
type: 'success',
showClose: true
})
this.$emit('closeSaveDialog')
})
}).catch(() => {
})
} else {
save(this.templateInfo).then(response => {
this.$message({
message: this.$t('commons.save_success'),
type: 'success',
showClose: true
})
this.$emit('closeSaveDialog')
})
}
})
}
}
}
</script>
<style scoped>
.de-tab {
border:1px solid #E6E6E6;
min-height:200px !important;
max-height:300px !important;
overflow:auto;
margin-top: 10px;
}
.my_table >>> .el-table__row>td{
/* 去除表格线 */
border: none;
padding: 0 0;
}
.my_table >>> .el-table th.is-leaf {
/* 去除上边框 */
border: none;
}
.my_table >>> .el-table::before{
/* 去除下边框 */
height: 0;
}
.root-class {
margin: 15px 0px 5px;
text-align: center;
}
</style>