|
|
@@ -3,26 +3,33 @@
|
|
|
<j-form-container :disabled="formDisabled">
|
|
|
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
|
|
|
<a-row class="inspect-order-layout">
|
|
|
- <a-col :span="8" class="inspect-tree">
|
|
|
+ <a-col :span="6" class="inspect-tree">
|
|
|
<a-tree
|
|
|
:tree-data="treeData"
|
|
|
show-icon
|
|
|
- default-expand-all
|
|
|
showLine
|
|
|
+ default-expand-all
|
|
|
:selected-keys="selectedKeys"
|
|
|
:replaceFields="replaceFields"
|
|
|
@select="onSelect"
|
|
|
- >
|
|
|
- <a-icon slot="switcherIcon" type="down" />
|
|
|
- <a-icon slot="smile" type="smile-o" />
|
|
|
- <a-icon slot="meh" type="smile-o" />
|
|
|
- <template slot="custom" slot-scope="{ selected }">
|
|
|
- <a-icon :type="selected ? 'frown' : 'frown-o'" />
|
|
|
+ >
|
|
|
+ <!-- 每项 最前面的 箭头的 icon -->
|
|
|
+ <a-icon slot="switcherIcon" type="caret-down" />
|
|
|
+ <!-- slot="praent" 配合 treeData数据中的 slots 设置目录下 的 icon -->
|
|
|
+ <!-- <a-icon slot="parent" style="color:#0DD3FF" type="folder-open" /> -->
|
|
|
+ <!-- slot="child" 配合 treeData数据children下的 slots 设置children目录 的 icon -->
|
|
|
+ <!-- <a-icon slot="child" style="color:#FED037" type="folder-open" /> -->
|
|
|
+ <!-- 数据中 每个 节点 的 scopedSlots 字段(插槽) 用来设置 所有(子父节点)节点 的 统一的 icon-->
|
|
|
+ <template slot="handle" slot-scope="item">
|
|
|
+ <!--item.title 为treeData的 title 字段-->
|
|
|
+ <span>{{item.title}}</span>
|
|
|
+ <!-- completionStatus === '1'表示已完成 -->
|
|
|
+ <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" v-if="item.completionStatus === '1'" style="margin-left: 4px;"/>
|
|
|
</template>
|
|
|
</a-tree>
|
|
|
</a-col>
|
|
|
- <a-col :span="16" class="itemList-table">
|
|
|
- <a-button @click="handleFeedback">提交反馈</a-button>
|
|
|
+ <a-col :span="18" class="itemList-table">
|
|
|
+ <a-button type="primary" @click="handleFeedback" style="margin-bottom: 8px;float: right;z-index: 9999;">提交反馈</a-button>
|
|
|
<a-table
|
|
|
ref="table"
|
|
|
size="middle"
|
|
|
@@ -60,21 +67,29 @@
|
|
|
|
|
|
<script>
|
|
|
|
|
|
-const treeData = [
|
|
|
+const treeData1 = [
|
|
|
{
|
|
|
title: '测试123456',
|
|
|
key: '1111111111111',
|
|
|
type: '巡检路线',
|
|
|
+ completionStatus: '0',
|
|
|
+ slots: { icon: 'parent', },
|
|
|
+ // ⚠️重点这这里⚠️每一条数据上都添加scopedSlots属性
|
|
|
+ scopedSlots:{ title:"handle" },
|
|
|
children: [
|
|
|
{
|
|
|
title: '测试巡检点的修改NO1',
|
|
|
key: '12223333333',
|
|
|
type: '巡检点',
|
|
|
+ slots: { icon: 'child', },
|
|
|
+ // ⚠️重点这这里⚠️每一条数据上都添加scopedSlots属性
|
|
|
+ scopedSlots:{ title:"handle" },
|
|
|
children: [
|
|
|
{
|
|
|
title: '半自动立钻Z5180C',
|
|
|
key: '55555555555',
|
|
|
type: '巡检内容',
|
|
|
+ scopedSlots:{ title:"handle" },
|
|
|
ItemList: [
|
|
|
// 巡检项相关信息
|
|
|
]
|
|
|
@@ -87,6 +102,8 @@ const treeData = [
|
|
|
title: '测试巡检点的修改NO2',
|
|
|
key: '456293324552',
|
|
|
type: '巡检点',
|
|
|
+ completionStatus: '1',
|
|
|
+ scopedSlots:{ title:"handle" },
|
|
|
children: [
|
|
|
{
|
|
|
title: '半自动立钻Z5180D',
|
|
|
@@ -200,9 +217,6 @@ const treeData = [
|
|
|
this.modelDefault = JSON.parse(JSON.stringify(this.model));
|
|
|
},
|
|
|
methods: {
|
|
|
- add () {
|
|
|
- this.edit(this.modelDefault);
|
|
|
- },
|
|
|
edit (record) {
|
|
|
// this.model = Object.assign({}, record);
|
|
|
this.visible = true;
|
|
|
@@ -297,12 +311,29 @@ const treeData = [
|
|
|
// })
|
|
|
getAction(this.url.queryTreeById, {id: record.id}).then((res) => {
|
|
|
console.log(res)
|
|
|
- this.model = res.result
|
|
|
+ if(this.selectedKeys.length === 0){
|
|
|
+ this.model = res.result
|
|
|
+ }
|
|
|
// this.model.itemList = []
|
|
|
- this.treeData = res.result.children
|
|
|
+ this.treeData = this.setIcon(res.result.children)
|
|
|
this.confirmLoading = false
|
|
|
})
|
|
|
},
|
|
|
+ // 设置树结构图标
|
|
|
+ setIcon(data) {
|
|
|
+ var setIconData = data
|
|
|
+ for (let item of setIconData) {
|
|
|
+ // 判断是不是父级
|
|
|
+ if (item.children && item.children.length > 0) {
|
|
|
+ //是父级的话递归调用
|
|
|
+ this.setIcon(item.children);
|
|
|
+ item.scopedSlots = { title: "handle" }
|
|
|
+ } else {
|
|
|
+ item.scopedSlots = { title: "handle" }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return setIconData
|
|
|
+ },
|
|
|
onSelect(selectedKeys, info) {
|
|
|
// 二次点击树节点时selectedKeys为空,直接return中断执行
|
|
|
if (selectedKeys.length === 0) return
|
|
|
@@ -338,35 +369,6 @@ const treeData = [
|
|
|
this.confirmLoading = false;
|
|
|
})
|
|
|
},
|
|
|
- submitForm () {
|
|
|
- const that = this;
|
|
|
- // 触发表单验证
|
|
|
- this.$refs.form.validate(valid => {
|
|
|
- if (valid) {
|
|
|
- that.confirmLoading = true;
|
|
|
- let httpurl = '';
|
|
|
- let method = '';
|
|
|
- if(!this.model.id){
|
|
|
- httpurl+=this.url.add;
|
|
|
- method = 'post';
|
|
|
- }else{
|
|
|
- httpurl+=this.url.edit;
|
|
|
- method = 'put';
|
|
|
- }
|
|
|
- httpAction(httpurl,this.model,method).then((res)=>{
|
|
|
- if(res.success){
|
|
|
- that.$message.success(res.message);
|
|
|
- that.$emit('ok');
|
|
|
- }else{
|
|
|
- that.$message.warning(res.message);
|
|
|
- }
|
|
|
- }).finally(() => {
|
|
|
- that.confirmLoading = false;
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
yuhan