Merge branch 'liuqiang' into v3

src/views/biz/dirTemplate/index.vue

@@ -137,6 +137,24 @@
           <el-input v-model="form.tmplName" placeholder="请输入模板名称"/>
         </el-form-item>
         <el-form-item label="模板内容" prop="tmplContent">
+           <el-tree
+            :data="tempData"
+            default-expand-all
+            node-key="id"
+            style="width:100%"
+            :expand-on-click-node="false"
+          >
+            <template #default="{ node, data }">
+              <span class="custom-tree-node">
+                <span>{{ node.label }}</span>
+                <span>
+                  <a class="btm" @click="append(data)"> 增加 </a>
+                  <a class="btm" @click="updataNode(data)"> 修改 </a>
+                  <a class="btm" style="margin-left: 8px" @click="remove(node, data)"> 删除 </a>
+                </span>
+              </span>
+            </template>
+          </el-tree>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注"/>
@@ -145,10 +163,20 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
+          <el-button @click="cancelAddTemp">取 消</el-button>
         </div>
       </template>
     </el-dialog>
+    <el-dialog title="目录名称" v-model="showMenuName" width="500px">
+       <el-input v-model="newName" maxlength="32" placeholder="请输入目录名称"/>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitMenuName">确 定</el-button>
+          <el-button @click="cancelMenuName">取 消</el-button>
+        </div>
+      </template>
+
+    </el-dialog>
   </div>
 </template>
 
@@ -172,6 +200,15 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
+const showMenuName = ref(false)
+const newName = ref()
+const tempId = ref(1000)
+const upNodeData = ref()
+const tempData = ref([
+  {id:1,label:'folder',children:[
+
+  ]}
+])
 
 const data = reactive({
   form: {},
@@ -260,6 +297,8 @@ function handleUpdate(row) {
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["dirTemplateRef"].validate(valid => {
+    const str = JSON.stringify(tempData.value)
+    form.value.tmplContent = str
     if (valid) {
       if (form.value.tmplId != null) {
         updateDirTemplate(form.value).then(response => {
@@ -296,6 +335,78 @@ function handleExport() {
     ...queryParams.value
   }, `dirTemplate_${new Date().getTime()}.xlsx`)
 }
+// 新增目录节点
+const append = (data)=>{
+  // console.log('data',data);
+
+  const newChild = {id: tempId.value, label: 'newMenu', children: [] }
+  tempId.value = tempId.value+1
+  if (!data.children) {
+    data.children = []
+  }
+  data.children.push(newChild)
+  tempData.value = [...tempData.value]
+}
+// 移除目录节点
+const remove = (node, data)=>{
+  const parent = node.parent
+  const children = parent.data.children || parent.data
+  const index = children.findIndex((d) => d.id === data.id)
+  children.splice(index, 1)
+  tempData.value = [...tempData.value]
+}
+// 修改目录节点
+const updataNode = (data)=>{
+  newName.value = data.label
+  showMenuName.value = true
+  upNodeData.value = data
+}
+const submitMenuName = ()=>{
+const oldArr = tempData.value
+  const getNewData = (data)=>{
+    data.map(item=>{
+      if(item.id == upNodeData.value.id){
+        console.log(1);
+        item.label = newName.value
+        return
+      }
+      if(item.children?.length>0){
+        getNewData(item.children)
+      }
+    })
+  }
+  getNewData(oldArr)
+  tempData.value= JSON.parse(JSON.stringify(oldArr))
+  setTimeout(() => {
+    showMenuName.value = false
+    // console.log('tempData.value',tempData.value);
+    // console.log('upNodeData.value',upNodeData.value);
+  }, 200);
+}
+const submitAddTemp = ()=>{
+
+}
+const cancelMenuName = ()=>{
+  newName.value = ''
+  showMenuName.value = false
+}
+const cancelAddTemp = ()=>{
+  open.value = false
+}
 
 getList();
 </script>
+<style lang="scss" scoped>
+.custom-tree-node {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+.btm{
+  color: skyblue;
+}
+</style>