|
|
@@ -1,65 +1,65 @@
|
|
|
<template>
|
|
|
- <ul v-if="itemList">
|
|
|
+ <ul v-if="itemList && itemList.length > 0">
|
|
|
<li v-for="(item, itemIdx) in itemList" :key="item.itemCode">
|
|
|
<el-row class="checklist-item">
|
|
|
- <el-col :span="1">
|
|
|
- <template v-if="item.status !== 2">
|
|
|
- <span v-if="item.parentId===0&&itemIdx===itemList.length-1" style="margin-right:10px" @click="handleAddItem(1,item,itemIdx+2,itemList)"><i class="el-icon-plus" /> </span>
|
|
|
- <template v-if="(item.itemType === 1||item.status === 2)&&item.status !== -1">
|
|
|
- <span @click="handleAddItem(2,item, itemIdx+2)"><i class="el-icon-zoom-in" /> </span>
|
|
|
- </template>
|
|
|
+ <el-col :span="2">
|
|
|
+ <span style="margin:0 5px" title="新增同级目录项" @click="handleAddItemBrother(item, itemIdx+1, itemList)"><i class="el-icon-plus" /> </span>
|
|
|
+ <template v-if="item.children && item.children.length >=0 && item.pointList && item.pointList.length<=0">
|
|
|
+ <span title="新增下级目录项" @click="handleAddItemSub(item)"><i class="el-icon-zoom-in" /> </span>
|
|
|
</template>
|
|
|
<span v-else> </span>
|
|
|
</el-col>
|
|
|
|
|
|
- <el-col :span="3" class="index">
|
|
|
- <span>{{ itemIdx + 1 }}</span>
|
|
|
+ <el-col :span="2" class="index">
|
|
|
+ <span v-if="nodePath!==''">{{ nodePath }}.{{ itemIdx + 1 }}</span>
|
|
|
+ <span v-else>{{ itemIdx + 1 }}</span>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="18" class="title">
|
|
|
- <div v-if="item.editAble" class="flex-start">
|
|
|
- <el-input v-model="item.itemTitle" type="text" @blur="cancelEdit(item)" />
|
|
|
- <el-button size="mini" style="margin:5px 10px" @click="saveEditItem(item)">保存</el-button>
|
|
|
+ <div v-if="item.editMode" class="flex-start">
|
|
|
+ <el-input v-model="item.itemTitle" size="mini" style="flex: 1;" />
|
|
|
+ <el-button size="mini" style="margin:5px 10px" @click="saveItem(item)">保存</el-button>
|
|
|
+ <el-button size="mini" style="margin:5px 10px" @click="cancelEdit(item)">放弃</el-button>
|
|
|
</div>
|
|
|
<span v-else>{{ item.itemTitle }}</span>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="2" class="bt-container">
|
|
|
- <template v-if="item.status !== 2&&item.status !== -1">
|
|
|
- <span class="hide" @click="handleEditItem(item)"> <i class="el-icon-edit" /> </span>
|
|
|
- <span class="hide" style="margin:0 10px" @click="handleDeleteItem(item)"> <i class="el-icon-delete" /> </span>
|
|
|
- <span v-if="item.itemType === 2" class="hide" @click="handleAddPoint(item)"><i class="el-icon-circle-plus" /> </span>
|
|
|
+ <template v-if="!item.editMode">
|
|
|
+ <span class="hide" title="编辑目录项" @click="handleEditItem(item)"> <i class="el-icon-edit" /> </span>
|
|
|
+ <span class="hide" title="删除目录项" style="margin:0 10px" @click="handleDeleteItem(item)"> <i class="el-icon-delete" /> </span>
|
|
|
+ <span v-if="item.children && item.children.length <= 0 && item.pointList && item.pointList.length >=0 " class="hide" title="添加内容项" @click="handleAddPoint(item)"><i class="el-icon-circle-plus" /> </span>
|
|
|
</template>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
- <checklist-item :item-list="item.children" @actionUpdate="actionUpdate" />
|
|
|
+ <checklist-item :item-list="item.children" :node-path="nodePath===''? (itemIdx+1): nodePath+'.'+(itemIdx+1)" @actionUpdate="actionUpdate" />
|
|
|
|
|
|
<ul class="point-container">
|
|
|
<li v-for="(point, pointIdx) in item.pointList" :key="point.pointCode" class="checklist-point">
|
|
|
<el-row>
|
|
|
- <el-col :span="1">
|
|
|
- <span> </span>
|
|
|
+ <el-col :span="3" class="index">
|
|
|
+ <i v-if="pointIdx>0" class="el-icon-sort-up" title="上移" @click="sortPoint(0,pointIdx,item.pointList)" />
|
|
|
+ <i v-if="item.pointList && item.pointList.length>pointIdx+1" title="下移" class="el-icon-sort-down" @click="sortPoint(1,pointIdx,item.pointList)" />
|
|
|
</el-col>
|
|
|
|
|
|
- <el-col :span="3" class="index">
|
|
|
- <span class="text-indent"> {{ pointIdx + 1 }}</span>
|
|
|
- <i v-if="pointIdx>0" class="el-icon-sort-up" @click="sortPoint(0,pointIdx,item.pointList)" />
|
|
|
- <i v-if="item.pointList.length>pointIdx+1" class="el-icon-sort-down" @click="sortPoint(1,pointIdx,item.pointList)" />
|
|
|
+ <el-col :span="1">
|
|
|
+ <span class="text-indent"> {{ pointIdx + 1 }}>.</span>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="18" class="title">
|
|
|
- <div v-if="point.editAble" class="flex-start">
|
|
|
- <el-input v-model="point.pointContent" type="text" @blur="cancelEdit(point)" />
|
|
|
+ <div v-if="point.editMode" class="flex-start">
|
|
|
+ <el-input v-model="point.pointContent" size="mini" />
|
|
|
<el-button size="mini" style="margin:5px 10px" @click="savePoint(point)">保存</el-button>
|
|
|
+ <el-button size="mini" style="margin:5px 10px" @click="cancelEdit(point)">放弃</el-button>
|
|
|
</div>
|
|
|
- <!-- <span v-else class="text-indent" @click="handleAddPoint(point)">{{ point.pointContent }} </span> -->
|
|
|
+
|
|
|
<span v-else class="text-indent">{{ point.pointContent }} </span>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="2" class="bt-container">
|
|
|
- <span class="hide" @click="handleEditPoint(point)"><i class="el-icon-edit" /></span>
|
|
|
- <span class="hide" style="margin:0 10px" @click="handleDeletePoint(point)"><i class="el-icon-delete" /></span>
|
|
|
+ <span class="hide" title="编辑内容项" @click="handleEditPoint(point)"><i class="el-icon-edit" /></span>
|
|
|
+ <span class="hide" style="margin:0 10px" title="删除内容项" @click="handleDeletePoint(point)"><i class="el-icon-delete" /></span>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</li>
|
|
|
@@ -71,6 +71,7 @@
|
|
|
<script>
|
|
|
import { createChecklistItem, updateChecklistItem, deleteChecklistItemById } from '@/api/system/checklistItemApi'
|
|
|
import { createChecklistItemPoint, updateChecklistItemPoint, deleteChecklistItemPointById } from '@/api/system/checklistItemPointApi'
|
|
|
+import { isNotNull } from '@/utils'
|
|
|
|
|
|
export default {
|
|
|
name: 'ChecklistItem',
|
|
|
@@ -78,6 +79,10 @@ export default {
|
|
|
itemList: {
|
|
|
type: Array,
|
|
|
default: undefined
|
|
|
+ },
|
|
|
+ nodePath: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: ''
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
@@ -87,48 +92,47 @@ export default {
|
|
|
},
|
|
|
mounted() { },
|
|
|
methods: {
|
|
|
+ isNotNull,
|
|
|
|
|
|
- // Show Data
|
|
|
+ // 显示数据
|
|
|
showData(data) {
|
|
|
this.viewData = data
|
|
|
},
|
|
|
|
|
|
- handleAddItem(type, item, sortNo, itemList) {
|
|
|
- let _item = {}
|
|
|
- if (type === 1) {
|
|
|
- _item = {
|
|
|
- itemTitle: '新增item',
|
|
|
- editAble: true,
|
|
|
- status: 2,
|
|
|
- itemType: 1,
|
|
|
- parentId: item.parentId,
|
|
|
- checklistId: item.checklistId,
|
|
|
- sortNo,
|
|
|
- children: []
|
|
|
- }
|
|
|
- itemList.push(_item)
|
|
|
- } else {
|
|
|
- _item = {
|
|
|
- itemTitle: `新增${item.itemTitle}子集item`,
|
|
|
- editAble: true,
|
|
|
- status: 2,
|
|
|
- itemType: 2,
|
|
|
- parentId: item.itemId,
|
|
|
- checklistId: item.checklistId,
|
|
|
- sortNo
|
|
|
- }
|
|
|
- if (item.itemType === 1) {
|
|
|
- if (item.children) {
|
|
|
- item.children.push(_item)
|
|
|
- } else {
|
|
|
- item.children = [_item]
|
|
|
- }
|
|
|
- this.$forceUpdate()
|
|
|
- }
|
|
|
+ // 添加下一个同级节点
|
|
|
+ handleAddItemBrother(item, idx, itemList) {
|
|
|
+ const newItem = {
|
|
|
+ itemId: 0,
|
|
|
+ itemTitle: '新增item',
|
|
|
+ editMode: true,
|
|
|
+ itemType: 1,
|
|
|
+ parentId: item.parentId,
|
|
|
+ checklistId: item.checklistId,
|
|
|
+ sortNo: item.sortNo + 1,
|
|
|
+ children: []
|
|
|
}
|
|
|
+ itemList.splice(idx, 0, newItem)
|
|
|
+ this.$forceUpdate()
|
|
|
},
|
|
|
- saveEditItem(item) {
|
|
|
- if (item.status === 2) {
|
|
|
+
|
|
|
+ // 添加子结点
|
|
|
+ handleAddItemSub(item) {
|
|
|
+ const newItem = {
|
|
|
+ itemId: 0,
|
|
|
+ itemTitle: `新增${item.itemTitle}子集item`,
|
|
|
+ itemType: 1,
|
|
|
+ parentId: item.itemId,
|
|
|
+ checklistId: item.checklistId,
|
|
|
+ sortNo: item.children.length,
|
|
|
+ editMode: true
|
|
|
+ }
|
|
|
+ item.children.push(newItem)
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+
|
|
|
+ // "保存" Item
|
|
|
+ saveItem(item) {
|
|
|
+ if (item.itemId <= 0) {
|
|
|
createChecklistItem(item).then((resp) => {
|
|
|
const { data } = resp
|
|
|
this.formData = data
|
|
|
@@ -147,14 +151,17 @@ export default {
|
|
|
console.log(error)
|
|
|
})
|
|
|
}
|
|
|
- item.editAble = false
|
|
|
+ item.editMode = false
|
|
|
this.$forceUpdate()
|
|
|
},
|
|
|
+
|
|
|
+ // 编辑 Item
|
|
|
handleEditItem(item) {
|
|
|
- item.editAble = true
|
|
|
+ item.editMode = true
|
|
|
this.$forceUpdate()
|
|
|
},
|
|
|
|
|
|
+ // 删除 Item
|
|
|
handleDeleteItem(item) {
|
|
|
const { checklistId, itemId } = item
|
|
|
const self = this
|
|
|
@@ -174,41 +181,48 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
|
|
|
+ // 新增 Point
|
|
|
handleAddPoint(item) {
|
|
|
item.pointList = item.pointList || []
|
|
|
item.pointList.push({
|
|
|
- pointContent: 'point',
|
|
|
itemId: item.itemId,
|
|
|
+ pointId: 0,
|
|
|
checklistId: item.checklistId,
|
|
|
- editAble: true,
|
|
|
- status: 2
|
|
|
+ pointContent: 'point',
|
|
|
+ sortNo: item.pointList.length + 1,
|
|
|
+ editMode: true
|
|
|
})
|
|
|
this.$forceUpdate()
|
|
|
},
|
|
|
|
|
|
- savePoint(point) {
|
|
|
- createChecklistItemPoint(point).then((resp) => {
|
|
|
- point.editAble = false
|
|
|
- this.$emit('actionUpdate')
|
|
|
- this.$forceUpdate()
|
|
|
- }).catch((error) => {
|
|
|
- console.log(error)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- saveEdit(point) {
|
|
|
- updateChecklistItemPoint(point).then((resp) => {
|
|
|
- point.editAble = false
|
|
|
- this.$emit('actionUpdate')
|
|
|
- this.$forceUpdate()
|
|
|
- }).catch((error) => {
|
|
|
- console.log(error)
|
|
|
- })
|
|
|
- },
|
|
|
+ // 编辑 Point
|
|
|
handleEditPoint(point) {
|
|
|
- point.editAble = true
|
|
|
+ point.editMode = true
|
|
|
this.$forceUpdate()
|
|
|
},
|
|
|
+
|
|
|
+ // 保存 Point
|
|
|
+ savePoint(point) {
|
|
|
+ if (point.pointId <= 0) {
|
|
|
+ createChecklistItemPoint(point).then((resp) => {
|
|
|
+ point.editMode = false
|
|
|
+ this.$emit('actionUpdate')
|
|
|
+ this.$forceUpdate()
|
|
|
+ }).catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ updateChecklistItemPoint(point).then((resp) => {
|
|
|
+ point.editMode = false
|
|
|
+ this.$emit('actionUpdate')
|
|
|
+ this.$forceUpdate()
|
|
|
+ }).catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除 Point
|
|
|
handleDeletePoint(point) {
|
|
|
const { checklistId, itemId, pointId } = point
|
|
|
this.$confirm(`此操作将删除该数据, 是否继续?`, '提示', {
|
|
|
@@ -225,30 +239,35 @@ export default {
|
|
|
this.$message({ type: 'info', message: '已取消删除' })
|
|
|
})
|
|
|
},
|
|
|
- actionUpdate() {
|
|
|
- this.$emit('actionUpdate')
|
|
|
- this.$forceUpdate()
|
|
|
- },
|
|
|
+
|
|
|
+ // 放弃修改
|
|
|
cancelEdit(node) {
|
|
|
- delete node.editAble
|
|
|
+ node.editMode = false
|
|
|
this.$forceUpdate()
|
|
|
},
|
|
|
- sortPoint(status, index, items) {
|
|
|
- const point = items[index]
|
|
|
+
|
|
|
+ // 保存点
|
|
|
+ sortPoint(status, index, pointList) {
|
|
|
+ const point = pointList[index]
|
|
|
var swapPoint = {}
|
|
|
var sortNo = index + 1
|
|
|
if (status === 0) { // 上移
|
|
|
- swapPoint = items[index - 1]
|
|
|
+ swapPoint = pointList[index - 1]
|
|
|
swapPoint.sortNo = sortNo
|
|
|
- sortNo = sortNo - 1
|
|
|
} else {
|
|
|
- swapPoint = items[index + 1]
|
|
|
+ swapPoint = pointList[index + 1]
|
|
|
swapPoint.sortNo = sortNo
|
|
|
sortNo = sortNo + 1
|
|
|
}
|
|
|
point.sortNo = sortNo
|
|
|
this.saveEdit(swapPoint)
|
|
|
this.saveEdit(point)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新
|
|
|
+ actionUpdate() {
|
|
|
+ this.$emit('actionUpdate')
|
|
|
+ this.$forceUpdate()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -261,30 +280,36 @@ ul {
|
|
|
min-height: 1px;
|
|
|
}
|
|
|
}
|
|
|
+.flex-start{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
// .hide{
|
|
|
// display: none;
|
|
|
// }
|
|
|
- .checklist-item {
|
|
|
- color: #F7F7F7;
|
|
|
- line-height: 1;
|
|
|
- .el-col{
|
|
|
- padding-top: 10px;
|
|
|
- padding-bottom: 10px;
|
|
|
- }
|
|
|
- &.el-row{
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- &:hover{
|
|
|
- .hide{
|
|
|
- display: inline-block;
|
|
|
+ .checklist-item {
|
|
|
+ background-color: #435c70;
|
|
|
+ color: #F7F7F7;
|
|
|
+ line-height: 1;
|
|
|
+ .el-col{
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ &.el-row{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ &:hover{
|
|
|
+ .hide{
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.checklist-point {
|
|
|
color: #F7F7F7;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
line-height: 1;
|
|
|
.el-col{
|
|
|
padding-top: 10px;
|
|
|
@@ -310,7 +335,8 @@ ul ul{
|
|
|
}
|
|
|
.checklist-point{
|
|
|
.index,.title{
|
|
|
- text-indent: 30px;
|
|
|
+ text-indent: 30px;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
.index{
|
|
|
[class^="el-icon-sort"]{
|
|
|
@@ -327,7 +353,6 @@ ul ul{
|
|
|
}
|
|
|
.el-row{
|
|
|
.title{
|
|
|
- background-color: #435c70;
|
|
|
padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
border-bottom: 1px solid #587185;
|