Assets_permission_action 优化 (#3585)

* [Update] 初步实现 actions的checkbox层叠嵌套

* [Update] 优化actions的checkbox层叠嵌套

* [Update] 修改校验用户/系统用户/资产的权限API可能会出现的问题

* [Update] 更新资产授权中动作的展示

* [Update] 更新资产授权中动作的展示 2

* [Update] 更新资产授权中动作的展示 3

Co-authored-by: BaiJiangJie <32935519+BaiJiangJie@users.noreply.github.com>

apps/perms/api/user_permission/common.py

@@ -84,6 +84,8 @@ class ValidateUserAssetPermissionApi(UserAssetPermissionMixin, APIView):
         system_users_actions = self.util.get_asset_system_users_with_actions(
             asset)
         actions = system_users_actions.get(system_user)
+        if actions is None:
+            return Response({'msg': False}, status=403)
         if action_name in Action.value_to_choices(actions):
             return Response({'msg': True}, status=200)
         return Response({'msg': False}, status=403)

apps/perms/templates/perms/asset_permission_create_update.html

@@ -4,6 +4,17 @@
 {% load bootstrap3 %}
 {% block custom_head_css_js %}
     <link href="{% static 'css/plugins/datepicker/datepicker3.css' %}" rel="stylesheet">
+    <style>
+        .ul-padding-0 {
+            padding-inline-start: 0px
+        }
+        .ul-padding-20 {
+            padding-inline-start: 20px
+        }
+        ul li{
+            list-style-type: none;
+        }
+    </style>
 {% endblock %}
 
 {% block content %}
@@ -33,20 +44,55 @@
                                  </div>
                             {% endif %}
                             {% csrf_token %}
+
                             <h3>{% trans 'Basic' %}</h3>
                             {% bootstrap_field form.name layout="horizontal" %}
+
                             <div class="hr-line-dashed"></div>
                             <h3>{% trans 'User' %}</h3>
                             {% bootstrap_field form.users layout="horizontal" %}
                             {% bootstrap_field form.user_groups layout="horizontal" %}
+
                             <div class="hr-line-dashed"></div>
                             <h3>{% trans 'Asset' %}</h3>
                             {% bootstrap_field form.assets layout="horizontal" %}
                             {% bootstrap_field form.nodes layout="horizontal" %}
                             {% bootstrap_field form.system_users layout="horizontal" %}
+
                             <div class="hr-line-dashed"></div>
                             <h3>{% trans 'Action' %}</h3>
-                            {% bootstrap_field form.actions layout="horizontal" %}
+                            <div class="form-group required">
+                                <label class="col-md-2 control-label">{{ form.actions.label }}</label>
+                                <div class="col-md-9">
+                                    <div id="id_actions">
+                                        <ul class="ul-padding-0">
+                                            <li>
+                                                <div class="checkbox">{{ form.actions.0}}</div>
+                                                <ul class="ul-padding-20">
+                                                    <li>
+                                                        <div class="checkbox">{{ form.actions.1}}</div>
+                                                    </li>
+
+                                                    <li>
+                                                        <div class="checkbox">{{ form.actions.4}}</div>
+                                                        <ul class="ul-padding-20">
+                                                            <li>
+                                                                <div class="checkbox">{{ form.actions.2}}</div>
+                                                            </li>
+                                                            <li>
+                                                                <div class="checkbox">{{ form.actions.3}}</div>
+                                                            </li>
+                                                        </ul>
+                                                    </li>
+                                                </ul>
+
+                                            </li>
+                                        </ul>
+                                        <div class="help-block">{{ form.actions.help_text }}</div>
+                                    </div>
+                                </div>
+                            </div>
+
                             <div class="hr-line-dashed"></div>
                             <h3>{% trans 'Other' %}</h3>
                             <div class="form-group">
@@ -100,6 +146,21 @@
 <script>
 var api_action =  "{{ api_action }}";
 
+var idActionAll = "id_actions_0";
+var idActionConnect = "id_actions_1";
+var idActionUpload = "id_actions_2";
+var idActionDownload = "id_actions_3";
+var idActionUpDownload = "id_actions_4";
+var elementActionAll = document.getElementById(idActionAll);
+var elementActionConnect = document.getElementById(idActionConnect);
+var elementActionUpload = document.getElementById(idActionUpload);
+var elementActionDownload = document.getElementById(idActionDownload);
+var elementActionUpDownload = document.getElementById(idActionUpDownload);
+var elementActionUpDownloadChildren = [elementActionUpload, elementActionDownload];
+var elementActionAllChildren = [
+    elementActionConnect, elementActionUpload, elementActionDownload, elementActionUpDownload
+];
+
 $(document).ready(function () {
     $('.select2').select2({
         closeOnSelect: false
@@ -110,6 +171,27 @@ $(document).ready(function () {
     initDateRangePicker('#date_start');
     initDateRangePicker('#date_expired');
     initAssetTreeModel('#id_assets');
+}).on("change", "input[name=actions]", function (e) {
+    let idAction = e.target.getAttribute("id");
+    if (idAction === idActionAll){
+        $.each(elementActionAllChildren, function(i, elementAction){
+            elementAction.checked = elementActionAll.checked
+        });
+        return;
+    }
+    else if (idAction === idActionUpDownload){
+        $.each(elementActionUpDownloadChildren, function(i, elementAction){
+            elementAction.checked = elementActionUpDownload.checked
+        });
+    }
+    else if ([idActionUpload, idActionDownload].indexOf(idAction) !== -1){
+        elementActionUpDownload.checked = elementActionUpload.checked && elementActionDownload.checked
+    }
+    let checked = true;
+    $.each(elementActionAllChildren, function(i, elementAction){
+        checked &= elementAction.checked;
+    });
+    elementActionAll.checked = checked;
 })
 .on("submit", "form", function (evt) {
     evt.preventDefault();
@@ -133,6 +215,6 @@ $(document).ready(function () {
         redirect_to: redirect_to
     };
     formSubmit(props);
- })
+})
 </script>
 {% endblock %}