ele-usky-admin/src/views/tenantManage/authConfig/dialogComponent.vue

<template>
  <div class="aa">
    <el-dialog
      :title="dialogTitle"
      v-model="showDialog"
      @open="open()"
      @close="closeDialog(0)"
    >
      <el-form
        ref="formInfo"
        :model="form"
        class="demo-form-inline"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item label="" prop="aaa">
          <!-- <div>
            <el-checkbox
              v-model="checked1"
              label="展开/折叠"
              size="large"
              @change="handleExpandChange"
            />
            <el-checkbox v-model="checked2" label="全选/全不选" size="large" />
            <el-checkbox v-model="checked3" label="父子联动" size="large"/>
          </div> -->
          <el-tree
            v-if="data.length"
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            show-checkbox
            node-key="id"
            :default-expand-all="isExpand"
            :default-checked-keys="checkedArr"
            :check-strictly="isStrictly"
             @check="currentChecked"
          />

          <br />

          <div style="text-align: right">
            <el-button @click="closeDialog(0)">取消</el-button>
            <el-button type="primary" @click="submitForm(formInfo)">
              保存
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect, watch, onMounted } from 'vue'
import * as api from '@/api/tenantManage/authConfig.js'
import { ElMessage } from 'element-plus'
// import { parseTime } from '@/utils'
// import { validatorPhone, parseTime, isEmail } from '@/utils'
export default defineComponent({
  name: 'DialogComponent',
  emits: ['closeDialog'],
  props: {
    show_Dialog: Boolean,
    dialogTitle: String,
    itemInfo: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  setup(props, { emit }) {
    const store = useStore()
    const beginTime = ref('')
    const showDialog = ref(false)
    const form = ref({})
    const formInfo = ref(null)

    const isExpand = ref(false)
    const isStrictly = ref(false)
    const getPlatformBoxList = ref([])
    const checked1 = ref(false)
    const checked2 = ref(false)
    const checked3 = ref(false)
    const checkedArr = ref([])

    const data = ref([])

    const handleNodeClick = (data, obj, node) => {
      data, node
      console.log(data)
    }

     const currentChecked = (nodeObj, SelectedObj) => {
      nodeObj, SelectedObj
       console.log('SelectedObj.checkedNodes')
      console.log(SelectedObj.checkedNodes)
      checkedArr.value = []
 

      SelectedObj.checkedNodes.forEach((item) => {
        checkedArr.value.push(item.id)
      })
      console.log(checkedArr.value)
    }



    //展开合并
    const handleExpandChange = () => {
      data.value = []
      if (checked1.value) {
        isExpand.value = true
        setTimeout(function () {
          data.value = [
            {
              label: 'Level one 1',
              children: [
                {
                  label: 'Level two 1-1',
                  children: [
                    {
                      label: 'Level three 1-1-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 2',
              children: [
                {
                  label: 'Level two 2-1',
                  children: [
                    {
                      label: 'Level three 2-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 2-2',
                  children: [
                    {
                      label: 'Level three 2-2-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 3',
              children: [
                {
                  label: 'Level two 3-1',
                  children: [
                    {
                      label: 'Level three 3-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 3-2',
                  children: [
                    {
                      label: 'Level three 3-2-1',
                    },
                  ],
                },
              ],
            },
          ]
        }, 10)
      } else {
        isExpand.value = false
        setTimeout(function () {
          data.value = [
            {
              label: 'Level one 1',
              children: [
                {
                  label: 'Level two 1-1',
                  children: [
                    {
                      label: 'Level three 1-1-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 2',
              children: [
                {
                  label: 'Level two 2-1',
                  children: [
                    {
                      label: 'Level three 2-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 2-2',
                  children: [
                    {
                      label: 'Level three 2-2-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 3',
              children: [
                {
                  label: 'Level two 3-1',
                  children: [
                    {
                      label: 'Level three 3-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 3-2',
                  children: [
                    {
                      label: 'Level three 3-2-1',
                    },
                  ],
                },
              ],
            },
          ]
        }, 10)
      }
    }

    //全选全不选
    const handleCheckedChange = () => {
      data.value = []
      if (checked2.value) {
        isExpand.value = true
        setTimeout(function () {
          data.value = [
            {
              label: 'Level one 1',
              children: [
                {
                  label: 'Level two 1-1',
                  children: [
                    {
                      label: 'Level three 1-1-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 2',
              children: [
                {
                  label: 'Level two 2-1',
                  children: [
                    {
                      label: 'Level three 2-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 2-2',
                  children: [
                    {
                      label: 'Level three 2-2-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 3',
              children: [
                {
                  label: 'Level two 3-1',
                  children: [
                    {
                      label: 'Level three 3-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 3-2',
                  children: [
                    {
                      label: 'Level three 3-2-1',
                    },
                  ],
                },
              ],
            },
          ]
        }, 10)
      } else {
        isExpand.value = false
        setTimeout(function () {
          data.value = [
            {
              label: 'Level one 1',
              children: [
                {
                  label: 'Level two 1-1',
                  children: [
                    {
                      label: 'Level three 1-1-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 2',
              children: [
                {
                  label: 'Level two 2-1',
                  children: [
                    {
                      label: 'Level three 2-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 2-2',
                  children: [
                    {
                      label: 'Level three 2-2-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 3',
              children: [
                {
                  label: 'Level two 3-1',
                  children: [
                    {
                      label: 'Level three 3-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 3-2',
                  children: [
                    {
                      label: 'Level three 3-2-1',
                    },
                  ],
                },
              ],
            },
          ]
        }, 10)
      }
    }
    const handleStrictlyChange = () => {
      if (checked3.value) {
        isStrictly.value = false
        setTimeout(function () {
          data.value = [
            {
              label: 'Level one 1',
              children: [
                {
                  label: 'Level two 1-1',
                  children: [
                    {
                      label: 'Level three 1-1-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 2',
              children: [
                {
                  label: 'Level two 2-1',
                  children: [
                    {
                      label: 'Level three 2-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 2-2',
                  children: [
                    {
                      label: 'Level three 2-2-1',
                    },
                  ],
                },
              ],
            },
            {
              label: 'Level one 3',
              children: [
                {
                  label: 'Level two 3-1',
                  children: [
                    {
                      label: 'Level three 3-1-1',
                    },
                  ],
                },
                {
                  label: 'Level two 3-2',
                  children: [
                    {
                      label: 'Level three 3-2-1',
                    },
                  ],
                },
              ],
            },
          ]
        }, 10)
      } else {
        isStrictly.value = true
        setTimeout(function () {}, 10)
      }
    }
    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }

    // 保存操作
    const submitForm = () => {
      if (checkedArr.value.length) {
           api.updateMenu({
             "tenantId":form.value.id,
             "menuIds":checkedArr.value
           }).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '保存成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
        } else {
          ElMessage.warning('请至少选择一个权限保存')
      
        }


    }

    const open = () => {
      form.value = props.itemInfo
      console.log('form.value')
      console.log(form.value)

      getMenuList()
    }

    // 关闭弹框
    const closeDialog = (flag) => {
      resetForm()
      showDialog.value = false
      emit('closeDialog', flag)
      checkedArr.value=[]
    }

    function resetForm() {
      formInfo.value.resetFields()
    }

    //树结构下拉
    function getMenuList() {
      api
        .getMenuList({
          tenantId: form.value.id,
          platformId: form.value.systemName,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            var jsona = JSON.stringify(requset.data.menus)
            var jsonb = jsona.replace(/"menu"/g, '"label"')
            jsonb = jsonb.replace(/"authority"/g, '"children"')
            jsonb = jsonb.replace(/"name"/g, '"label"')
            var jsonc = JSON.parse(jsonb)
            data.value = jsonc
            console.log('data.value')
            console.log(data.value)

            checkedArr.value = requset.data.checkedKeys
             console.log(  'checkedArr.value')
            console.log(  checkedArr.value)

            

          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    //监听变化
    watch(
      () => checked1.value,
      (newVal) => {
        console.log(newVal)
      },
      { lazy: true }
    )

    watchEffect((fn, options) => {
      fn, options
      showDialog.value = props.show_Dialog
    })

    //禁止选择以前的时间
    const pickerEndDate = (time) => {
      const timeRange = 1 * 24 * 60 * 60 * 1000
      return time.getTime() <= Date.now() - timeRange * 1
    }

    onMounted(() => {})

    return {
      pickerEndDate,
      roleValid,
      submitForm,
      closeDialog,
      open,

      store,
      beginTime,
      showDialog,

      checked: true,
      form,
      formInfo,
      getPlatformBoxList,

      handleNodeClick,
      data,
      isExpand,
      isStrictly,
      checked1,
      checked2,
      checked3,
      handleExpandChange,
      handleCheckedChange,
      handleStrictlyChange,
      checkedArr,
      currentChecked,

      rules: {
      }
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 240px;
}

.el-form-item {
  margin: 0 0 20px !important;
}
// label样式
.el-form-item__label {
  width: 120px !important;
}
.el-form-item__content {
  margin-left: 100px;
}
.demo-form-inline .el-form-item:not(.user-layout .el-form-item) {
  // margin: 0 auto 20px 55px;
}
.el-form-item:not(.user-layout .el-form-item) {
  max-width: 100%;
}
.el-tree {
  border: 1px solid #c0c4cc;
  padding: 15px;
}

// .aa {
//   ::v-deep .el-form-item--small .el-form-item__label {
//     line-height: 15px !important;
//   }
// }
</style>
<style>
</style>