|
|
|
@ -1,28 +1,28 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="head-container"> |
|
|
|
<el-button size="mini" @click="crud.toAdd"> |
|
|
|
<i class="iconfont icon-xinzeng" :disabled="crud.selections.length === 0" /> |
|
|
|
<el-button size="mini" @click="toAdd"> |
|
|
|
<i class="iconfont icon-xinzeng" :disabled="selections.length === 0" /> |
|
|
|
新增 |
|
|
|
</el-button> |
|
|
|
<el-button size="mini" :disabled="crud.selections.length !== 1" @click="crud.toEdit(crud.selections)"> |
|
|
|
<el-button size="mini" :disabled="selections.length !== 1" @click="toEdit(selections)"> |
|
|
|
<i class="iconfont icon-bianji" /> |
|
|
|
编辑 |
|
|
|
</el-button> |
|
|
|
<el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"> |
|
|
|
<el-button slot="reference" size="mini" :loading="delAllLoading" :disabled="selections.length === 0" @click="toDelete(selections)"> |
|
|
|
<i class="iconfont icon-shanchu" /> |
|
|
|
删除 |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<!--表单组件--> |
|
|
|
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
|
|
|
<el-dialog append-to-body :close-on-click-modal="false" :before-close="handleClose" :visible="metadataVisible" :title="metadataTitle"> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px"> |
|
|
|
<el-form-item label="编号" prop="number"> |
|
|
|
<el-input v-model="form.number" /> |
|
|
|
<el-form-item label="编号" prop="infoCode"> |
|
|
|
<el-input v-model="form.infoCode" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="元数据元素" prop="meteItem"> |
|
|
|
<el-input v-model="form.metaItem" /> |
|
|
|
<el-form-item label="元数据元素" prop="infoName"> |
|
|
|
<el-input v-model="form.infoName" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="顶级元数据" prop="isTop"> |
|
|
|
<el-radio-group v-model="form.isTop"> |
|
|
|
@ -30,93 +30,154 @@ |
|
|
|
<el-radio label="0">否</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="form.isTop === '0'" label="父级" prop="parent"> |
|
|
|
<el-select v-model="form.parent" style="width: 225px;"> |
|
|
|
<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" /> |
|
|
|
<el-form-item v-if="form.isTop === '0'" label="父级" prop="parentInfoId"> |
|
|
|
<el-select v-model="form.parentInfoId" style="width: 225px;"> |
|
|
|
<el-option v-for="item in selectOptions" :key="item.id" :label="item.label" :value="item.id" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
|
|
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button> |
|
|
|
<el-button type="text" @click="handleClose">取消</el-button> |
|
|
|
<el-button type="primary" @click="handleComfire">确定</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<div> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
v-loading="crud.loading" |
|
|
|
:data="crud.data" |
|
|
|
v-loading="loading" |
|
|
|
:data="tableData" |
|
|
|
highlight-current-row |
|
|
|
row-key="id" |
|
|
|
@select="crud.selectChange" |
|
|
|
@select-all="crud.selectAllChange" |
|
|
|
@selection-change="crud.selectionChangeHandler" |
|
|
|
@select-all="selectAll" |
|
|
|
@select="selectTr" |
|
|
|
@selection-change="selectionChangeHandler" |
|
|
|
@row-click="clickRowHandler" |
|
|
|
> |
|
|
|
<el-table-column type="selection" width="55" /> |
|
|
|
<el-table-column type="selection" align="center" width="55" /> |
|
|
|
<el-table-column type="index" label="序号" /> |
|
|
|
<el-table-column prop="number" label="编号" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="metaItem" label="元数据元素" /> |
|
|
|
<el-table-column prop="infoCode" label="编号" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="infoName" label="元数据元素" /> |
|
|
|
</el-table> |
|
|
|
<!--分页组件--> |
|
|
|
<pagination /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import CRUD, { presenter, header, form } from '@crud/crud' |
|
|
|
import pagination from '@crud/Pagination' |
|
|
|
|
|
|
|
const defaultForm = { id: null, number: null, meteItem: null, isTop: null, parent: null } |
|
|
|
|
|
|
|
import { FetchGetMetaInfo, FetchDelMetadataInfos, FetchEditMetadataInfo } from '@/api/system/metaData' |
|
|
|
export default { |
|
|
|
name: 'MetaDataList', |
|
|
|
components: { pagination }, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '元数据', url: 'api/users' }) |
|
|
|
}, |
|
|
|
mixins: [ |
|
|
|
presenter(), |
|
|
|
header(), |
|
|
|
form(function() { |
|
|
|
return Object.assign({ dicPid: this.dicPid }, defaultForm) |
|
|
|
}) |
|
|
|
], |
|
|
|
props: { |
|
|
|
selectedTreeItem: { |
|
|
|
type: Object, |
|
|
|
default: function() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
selectOptions: [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
value: 'M1 公文标识', |
|
|
|
label: 'M1 公文标识' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
value: 'M2 文种', |
|
|
|
label: 'M2 文种' |
|
|
|
} |
|
|
|
], |
|
|
|
loading: false, |
|
|
|
delAllLoading: false, |
|
|
|
tableData: [], |
|
|
|
selections: [], |
|
|
|
isAllSelect: false, |
|
|
|
metadataTitle: '新增元数据', |
|
|
|
metadataVisible: false, |
|
|
|
selectOptions: [], |
|
|
|
form: { id: null, infoCode: null, infoName: null, isTop: '1', parentInfoId: null }, |
|
|
|
rules: { |
|
|
|
number: [ |
|
|
|
infoCode: [ |
|
|
|
{ required: true, message: '编号不可为空', trigger: 'blur' } |
|
|
|
], |
|
|
|
meteItem: [ |
|
|
|
infoName: [ |
|
|
|
{ required: true, message: '元数据元素不可为空', trigger: 'blur' } |
|
|
|
], |
|
|
|
isTop: [ |
|
|
|
{ required: true, message: '请选择是否为顶级节点', trigger: 'change' } |
|
|
|
], |
|
|
|
parent: [ |
|
|
|
parentInfoId: [ |
|
|
|
{ required: true, message: '请选择父级元数据', trigger: 'change' } |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
selectedTreeItem: function(newValue, oldValue) { |
|
|
|
// if (newValue && newValue.id) { } |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
if (this.selectedTreeItem && this.selectedTreeItem.id) { |
|
|
|
this.getList() |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
[CRUD.HOOK.beforeRefresh]() { |
|
|
|
getList() { |
|
|
|
this.loading = true |
|
|
|
this.selectOptions = [] |
|
|
|
FetchGetMetaInfo({ metadataId: this.selectedTreeItem.id }).then((res) => { |
|
|
|
if (res.infos) { |
|
|
|
const resData = JSON.parse(res.infos) |
|
|
|
this.tableData = resData |
|
|
|
resData.map((item, index) => { |
|
|
|
const json = {} |
|
|
|
json.id = item.id |
|
|
|
json.label = item.infoCode + ' ' + item.infoName |
|
|
|
json.value = item.infoCode + ' ' + item.infoName |
|
|
|
this.selectOptions.push(json) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.tableData = [] |
|
|
|
} |
|
|
|
this.loading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
[CRUD.HOOK.afterRefresh]() { |
|
|
|
toAdd() { |
|
|
|
this.metadataVisible = true |
|
|
|
this.metadataTitle = '新增元数据' |
|
|
|
}, |
|
|
|
toEdit(data) { |
|
|
|
const editData = data[0] |
|
|
|
this.metadataVisible = true |
|
|
|
this.metadataTitle = '编辑元数据' |
|
|
|
this.form = { |
|
|
|
id: editData.id, |
|
|
|
infoCode: editData.infoCode, |
|
|
|
infoName: editData.infoName |
|
|
|
} |
|
|
|
if (editData.infoParentId) { |
|
|
|
this.form.isTop = '0' |
|
|
|
this.form.parentInfoId = editData.infoParentId |
|
|
|
} else { |
|
|
|
this.form.isTop = '1' |
|
|
|
this.form.parentInfoId = null |
|
|
|
} |
|
|
|
}, |
|
|
|
handleComfire() { |
|
|
|
this.$refs['form'].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
const params = { |
|
|
|
'metadataId': this.selectedTreeItem.id, |
|
|
|
'info': [{ |
|
|
|
'metadataInfoId': this.form.id, |
|
|
|
'parentInfoId': this.form.parentInfoId, |
|
|
|
'infoCode': this.form.infoCode, |
|
|
|
'infoName': this.form.infoName |
|
|
|
}] |
|
|
|
} |
|
|
|
delete this.form.isTop |
|
|
|
console.log(params) |
|
|
|
FetchEditMetadataInfo(params).then((res) => { |
|
|
|
if (res) { |
|
|
|
this.metadataVisible = false |
|
|
|
this.getList() |
|
|
|
this.clearForm() |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
console.log('error submit!!') |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
toDelete(datas) { |
|
|
|
this.$confirm('此操作将删除当前所选元数据' + '<span>你是否还要继续？</span>', '提示', { |
|
|
|
@ -125,10 +186,87 @@ export default { |
|
|
|
type: 'warning', |
|
|
|
dangerouslyUseHTMLString: true |
|
|
|
}).then(() => { |
|
|
|
this.crud.delAllLoading = true |
|
|
|
this.crud.doDelete(datas) |
|
|
|
this.delAllLoading = true |
|
|
|
const ids = [] |
|
|
|
datas.forEach(val => { |
|
|
|
ids.push(val.id) |
|
|
|
}) |
|
|
|
FetchDelMetadataInfos(ids).then(() => { |
|
|
|
this.$message({ |
|
|
|
message: '删除成功', |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
this.delAllLoading = false |
|
|
|
this.getList() |
|
|
|
}).catch(err => { |
|
|
|
this.delAllLoading = false |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
|
|
}, |
|
|
|
clearForm() { |
|
|
|
if (this.$refs['form']) { |
|
|
|
this.$refs['form'].clearValidate() |
|
|
|
this.form = {} |
|
|
|
} |
|
|
|
}, |
|
|
|
handleClose() { |
|
|
|
this.clearForm() |
|
|
|
this.metadataVisible = false |
|
|
|
}, |
|
|
|
selectAll() { |
|
|
|
this.isAllSelect = !this.isAllSelect |
|
|
|
const data = this.tableData |
|
|
|
this.toggleSelect(data, this.isAllSelect, 'all') |
|
|
|
}, |
|
|
|
// 选择某行 |
|
|
|
selectTr(selection, row) { |
|
|
|
this.$set(row, 'isChecked', !row.isChecked) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.isAllSelect = row.isChecked |
|
|
|
this.toggleSelect(row, row.isChecked, 'tr') |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 递归子级 |
|
|
|
toggleSelect(data, flag, type) { |
|
|
|
if (type === 'all') { |
|
|
|
if (data.length > 0) { |
|
|
|
data.forEach((item) => { |
|
|
|
this.toggleSelection(item, flag) |
|
|
|
if (item.children && item.children.length > 0) { |
|
|
|
this.toggleSelect(item.children, flag, type) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (data.children && data.children.length > 0) { |
|
|
|
data.children.forEach((item) => { |
|
|
|
item.isChecked = flag |
|
|
|
this.$refs.table.toggleRowSelection(item, flag) |
|
|
|
this.toggleSelect(item, flag, type) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
// 改变选中 |
|
|
|
toggleSelection(row, flag) { |
|
|
|
this.$set(row, 'isChecked', flag) |
|
|
|
this.$nextTick(() => { |
|
|
|
if (flag) { |
|
|
|
this.$refs.table.toggleRowSelection(row, flag) |
|
|
|
} else { |
|
|
|
this.$refs.table.clearSelection() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// table - 当前选中得row |
|
|
|
clickRowHandler(row) { |
|
|
|
this.$refs.table.clearSelection() |
|
|
|
this.$refs.table.toggleRowSelection(row) |
|
|
|
}, |
|
|
|
selectionChangeHandler(val) { |
|
|
|
this.selections = val |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
