Update ResourceSetting.vue

Author: betterdancing

packages/plugins/resource/src/ResourceSetting.vue

@@ -1,5 +1,158 @@
 <template>
-  <div>Setting</div>
+  <plugin-setting v-if="isShow" :fixed-name="PLUGIN_NAME.Resource" :align="align" :title="state.title">
+    <template #header>
+      <button-group>
+        <tiny-button type="primary" @click="saveResourceSetting">保存</tiny-button>
+        <svg-button name="close" @click="cancelResourceSetting"></svg-button>
+      </button-group>
+    </template>
+
+    <template #content>
+      <div class="resource-setting-content">
+        <tiny-collapse v-model="state.activeName" class="resource-setting-collapse">
+          <tiny-collapse-item title="基本设置" name="general">
+            <tiny-form
+              ref="generalForm"
+              :model="state.data"
+              :rules="rules"
+              label-width="80px"
+              label-position="left"
+              class="general-config-form"
+            >
+              <tiny-form-item prop="name" label="分组名称">
+                <tiny-input v-model="state.data.name"></tiny-input>
+              </tiny-form-item>
+              <tiny-form-item prop="description" label="分组描述">
+                <tiny-input type="textarea" v-model="state.data.description"></tiny-input>
+              </tiny-form-item>
+            </tiny-form>
+          </tiny-collapse-item>
+        </tiny-collapse>
+      </div>
+    </template>
+  </plugin-setting>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script>
+import { ref, reactive, computed } from 'vue'
+import { Button, Collapse, CollapseItem, Form, FormItem, Input } from '@opentiny/vue'
+import { useLayout, useNotify, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { PluginSetting, ButtonGroup, SvgButton } from '@opentiny/tiny-engine-common'
+import { createResourceGroup, updateResourceGroup } from './js/http'
+
+const isShow = ref(false)
+
+const state = reactive({
+  title: '分组设置',
+  activeName: 'general',
+  data: {
+    name: '',
+    description: ''
+  }
+})
+
+export const openResourceSettingPanel = (data) => {
+  if (data) {
+    state.data = { ...data }
+    console.log(state.data)
+  }
+  isShow.value = true
+}
+
+export const closeResourceSettingPanel = () => {
+  isShow.value = false
+}
+
+export default {
+  components: {
+    PluginSetting,
+    SvgButton,
+    TinyButton: Button,
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem,
+    TinyFormItem: FormItem,
+    TinyForm: Form,
+    TinyInput: Input,
+    ButtonGroup
+  },
+  props: {},
+  emits: ['create-group'],
+  setup(props, { emit }) {
+    const { PLUGIN_NAME, getPluginByLayout } = useLayout()
+    const align = computed(() => getPluginByLayout(PLUGIN_NAME.Resource))
+
+    const generalForm = ref()
+
+    const rules = reactive({
+      name: [{ required: true, message: '必填', trigger: 'blur' }]
+    })
+    const saveResourceSetting = () => {
+      generalForm.value.validate((valid) => {
+        if (state.data.id) {
+          updateResourceGroup(state.data.id, { name: state.data.name, description: state.data.description })
+            .then((res) => {
+              emit('create-group')
+              closeResourceSettingPanel()
+              useNotify({ message: '修改资源分组成功', type: 'success' })
+            })
+            .catch((err) => {
+              useNotify({ message: err, type: 'error' })
+            })
+        } else {
+          createResourceGroup(state.data)
+            .then((res) => {
+              emit('create-group')
+              closeResourceSettingPanel()
+              useNotify({ message: '添加资源分组成功', type: 'success' })
+            })
+            .catch((err) => {
+              useNotify({ message: err, type: 'error' })
+            })
+        }
+      })
+    }
+
+    const cancelResourceSetting = () => {
+      closeResourceSettingPanel()
+    }
+
+    return {
+      PLUGIN_NAME,
+      align,
+      isShow,
+      generalForm,
+      state,
+      rules,
+      saveResourceSetting,
+      cancelResourceSetting
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.resource-plugin-setting {
+  :deep(.plugin-setting-content) {
+    padding: 0 0 16px 0;
+  }
+
+  :deep(.tiny-collapse) {
+    border-bottom: 0;
+  }
+}
+.resource-setting-collapse {
+  :deep(.tiny-collapse-item__header) {
+    &,
+    &.is-active {
+      &::before {
+        border: none;
+      }
+    }
+
+    .svg-icon {
+      margin-right: 6px;
+    }
+  }
+  :deep(.tiny-collapse-item__content) {
+    padding: 0 12px 12px;
+  }
+}
+</style>