From 472e4254aa3457cc70434643b1d02d454f76ada1 Mon Sep 17 00:00:00 2001
From: wwp <782568523@qq.com>
Date: Mon, 19 Aug 2024 18:00:17 +0800
Subject: [PATCH] =?UTF-8?q?=E9=99=A2=E7=B3=BB=E4=B8=93=E4=B8=9A=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=B0=83=E8=AF=95=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/interface/sys/usermanage/major.ts |   1 +
 .../src/api/modules/usermanage/department.ts  |   2 +-
 .../src/api/modules/usermanage/major.ts       |   2 +-
 .../userManage/department/components/form.vue |  94 ++++++------
 .../src/views/userManage/department/index.vue |  92 ++----------
 .../userManage/major/components/form.vue      | 137 +++++++++++++++++
 .../src/views/userManage/major/index.vue      | 138 ++++++++++++++++++
 7 files changed, 337 insertions(+), 129 deletions(-)
 create mode 100644 SafeCampus.WEB/src/views/userManage/major/components/form.vue
 create mode 100644 SafeCampus.WEB/src/views/userManage/major/index.vue

diff --git a/SafeCampus.WEB/src/api/interface/sys/usermanage/major.ts b/SafeCampus.WEB/src/api/interface/sys/usermanage/major.ts
index 552f405..94c6b3f 100644
--- a/SafeCampus.WEB/src/api/interface/sys/usermanage/major.ts
+++ b/SafeCampus.WEB/src/api/interface/sys/usermanage/major.ts
@@ -28,6 +28,7 @@ export namespace SysMajor {
     introduce?: string | undefined;
     depId?: string | number | undefined;
     departmentName?: string | undefined;
+    sort?: string | number | undefined;
   }
   // 院系列表传参
   export interface Page extends ReqPage {}
diff --git a/SafeCampus.WEB/src/api/modules/usermanage/department.ts b/SafeCampus.WEB/src/api/modules/usermanage/department.ts
index 5fe0d6b..d1750fc 100644
--- a/SafeCampus.WEB/src/api/modules/usermanage/department.ts
+++ b/SafeCampus.WEB/src/api/modules/usermanage/department.ts
@@ -36,7 +36,7 @@ const userManageDepartmentApi = {
   },
   /** 删除院系 */
   delete(params: ReqId) {
-    return http.delete("delete", params);
+    return http.post("delete", params);
   },
   // 院系详情
   detail(params: ReqId) {
diff --git a/SafeCampus.WEB/src/api/modules/usermanage/major.ts b/SafeCampus.WEB/src/api/modules/usermanage/major.ts
index 3ec933e..3464057 100644
--- a/SafeCampus.WEB/src/api/modules/usermanage/major.ts
+++ b/SafeCampus.WEB/src/api/modules/usermanage/major.ts
@@ -36,7 +36,7 @@ const userManageMajorApi = {
   },
   /** 删除专业 */
   delete(params: ReqId) {
-    return http.delete("delete", params);
+    return http.post("delete", params);
   },
   // 专业详情
   detail(params: ReqId) {
diff --git a/SafeCampus.WEB/src/views/userManage/department/components/form.vue b/SafeCampus.WEB/src/views/userManage/department/components/form.vue
index eb72793..4b48292 100644
--- a/SafeCampus.WEB/src/views/userManage/department/components/form.vue
+++ b/SafeCampus.WEB/src/views/userManage/department/components/form.vue
@@ -5,42 +5,33 @@
 !-->
 <template>
   <div>
-    <form-container v-model="visible" :title="`${orgProps.opt}监控`" form-size="600px">
+    <form-container v-model="visible" :title="`${departmentProps.opt}院系`" form-size="600px">
       <el-form
-        ref="liveFormRef"
+        ref="departmentFormRef"
         :rules="rules"
-        :disabled="orgProps.disabled"
-        :model="orgProps.record"
-        :hide-required-asterisk="orgProps.disabled"
+        :disabled="departmentProps.disabled"
+        :model="departmentProps.record"
+        :hide-required-asterisk="departmentProps.disabled"
         label-width="auto"
         label-suffix=" :"
       >
-        <s-form-item label="摄像头名称" prop="sensorName">
-          <s-input v-model="orgProps.record.sensorName"></s-input>
+        <s-form-item label="院系编号" prop="code">
+          <s-input v-model="departmentProps.record.code"></s-input>
         </s-form-item>
-        <s-form-item label="所属学校" prop="fieldName">
-          <org-selector v-model:org-value="orgProps.record.fieldName" :org-tree-api="bizOrgApi.tree" :show-all="false" />
-        </s-form-item>
-        <s-form-item label="设备IP" prop="directUrlIp">
-          <s-input v-model="orgProps.record.directUrlIp" clearable></s-input>
-        </s-form-item>
-        <s-form-item label="分辨率(width)" prop="resWidth">
-          <s-input v-model="orgProps.record.resWidth" clearable></s-input>
-        </s-form-item>
-        <s-form-item label="分辨率(height)" prop="resHeight">
-          <s-input v-model="orgProps.record.resHeight" clearable></s-input>
+        <s-form-item label="院系名称" prop="name">
+          <s-input v-model="departmentProps.record.name"></s-input>
         </s-form-item>
       </el-form>
       <template #footer>
         <el-button @click="onClose"> 取消 </el-button>
-        <el-button v-show="!orgProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
+        <el-button v-show="!departmentProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
       </template>
     </form-container>
   </div>
 </template>
 
 <script setup lang="ts">
-import { SysOrg, SysUser, bizOrgApi, bizPositionApi, sysRoleApi, bizUserApi } from "@/api";
+import { SysDepartment, userManageDepartmentApi } from "@/api";
 import { FormOptEnum, SysDictEnum } from "@/enums";
 import { required } from "@/utils/formRules";
 import { FormInstance } from "element-plus";
@@ -49,11 +40,8 @@ import { useDictStore } from "@/stores/modules";
 const visible = ref(false); //是否显示表单
 const dictStore = useDictStore(); //字典仓库
 
-// 通用状态选项
-const statusOptions = dictStore.getDictList(SysDictEnum.COMMON_STATUS);
-
 // 表单参数
-const orgProps = reactive<FormProps.Base<any>>({
+const departmentProps = reactive<FormProps.Base<any>>({
   opt: FormOptEnum.ADD,
   record: {},
   disabled: false
@@ -61,52 +49,60 @@ const orgProps = reactive<FormProps.Base<any>>({
 
 // 表单验证规则
 const rules = reactive({
-  sensorName: [required("请输入摄像头名称")],
-  fieldName: [required("请选择所属学校")],
-  directUrlIp: [required("请选择设备IP")],
-  resWidth: [required("请输入分辨率(width)")],
-  resHeight: [required("请输入分辨率(height)")]
+  code: [required("请输入院系编号")],
+  name: [required("请输入院系名称")]
 });
 
 /**
  * 打开表单
  * @param props 表单参数
  */
-function onOpen(props: FormProps.Base<SysOrg.SysOrgInfo>) {
-  Object.assign(orgProps, props); //合并参数
+function onOpen(props: FormProps.Base<SysDepartment.DepartmentInfo>) {
+  Object.assign(departmentProps, props); //合并参数
   if (props.opt == FormOptEnum.ADD) {
     //如果是新增,设置默认值
-    // orgProps.record.sortCode = 99;
-    // orgProps.record.status = statusOptions[0].value;
+    // departmentProps.record.sortCode = 99;
+    // departmentProps.record.status = statusOptions[0].value;
   }
   visible.value = true; //显示表单
   if (props.record.id) {
-    orgProps.record = props.record;
+    departmentProps.record = props.record;
     //如果传了id，就去请求api获取record
-    return;
-    bizOrgApi.detail({ id: props.record.id }).then(res => {
-      orgProps.record = res.data;
+
+    userManageDepartmentApi.detail({ id: props.record.id }).then(res => {
+      departmentProps.record = res.data;
     });
   }
 }
 
 // 提交数据（新增/编辑）
-const liveFormRef = ref<FormInstance>();
+const departmentFormRef = ref<FormInstance>();
 /** 提交表单 */
 async function handleSubmit() {
-  liveFormRef.value?.validate(async valid => {
+  departmentFormRef.value?.validate(async valid => {
     if (!valid) return; //表单验证失败
-    console.log(orgProps);
-    return;
+    console.log(departmentProps);
+    // return;
     //提交表单
-    await bizOrgApi
-      .submitForm(orgProps.record, orgProps.record.id != undefined)
-      .then(() => {
-        orgProps.successful!(); //调用父组件的successful方法
-      })
-      .finally(() => {
-        onClose();
-      });
+    if (departmentProps.opt == FormOptEnum.ADD) {
+      await userManageDepartmentApi
+        .add(departmentProps.record, departmentProps.record.id != undefined)
+        .then(() => {
+          departmentProps.successful!(); //调用父组件的successful方法
+        })
+        .finally(() => {
+          onClose();
+        });
+    } else {
+      await userManageDepartmentApi
+        .update(departmentProps.record, departmentProps.record.id != undefined)
+        .then(() => {
+          departmentProps.successful!(); //调用父组件的successful方法
+        })
+        .finally(() => {
+          onClose();
+        });
+    }
   });
 }
 
diff --git a/SafeCampus.WEB/src/views/userManage/department/index.vue b/SafeCampus.WEB/src/views/userManage/department/index.vue
index 85bb95e..16eb98f 100644
--- a/SafeCampus.WEB/src/views/userManage/department/index.vue
+++ b/SafeCampus.WEB/src/views/userManage/department/index.vue
@@ -1,12 +1,12 @@
 <!-- 
- * @Description: 人员管理
+ * @Description: 院系管理
  * @Author: wwp
  * @Date: 2024-7-15
 -->
 <template>
   <div class="main-box">
     <div class="table-box">
-      <ProTable ref="proTable" title="院系管理" :columns="columns" rowKey="personId" :request-api="userManageKeyPersonApi.page">
+      <ProTable ref="proTable" title="院系管理" :columns="columns" rowKey="id" :request-api="userManageDepartmentApi.page">
         <!-- 表格 header 按钮 -->
         <template #tableHeader="scope">
           <s-button suffix="院系" @click="onOpen(FormOptEnum.ADD)" />
@@ -23,17 +23,17 @@
         <template #operation="scope">
           <el-space>
             <s-button link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" />
-            <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.personId], `删除院系`)" />
+            <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.id], `删除院系`)" />
           </el-space>
         </template>
       </ProTable>
     </div>
-    <!-- 人员新增/编辑表单 -->
+    <!-- 院系新增/编辑表单 -->
     <Form ref="formRef"></Form>
   </div>
 </template>
 <script setup lang="tsx" name="SysUserKeyPersonnel">
-import { userManageKeyPersonApi,SysUserPersonnel } from "@/api";
+import { userManageDepartmentApi,SysDepartment } from "@/api";
 import { useHandleData } from "@/hooks/useHandleData";
 import { FormOptEnum } from "@/enums";
 import Form from "./components/form.vue";
@@ -45,43 +45,26 @@ import { TokenEnum } from "@/enums";
 import type { UploadProps } from "element-plus";
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const faceUrl = ref('');
-const visible = ref(false); //是否显示人员表单
+const visible = ref(false); //是否显示院系表单
 const proTable = ref<ProTableInstance>();
 const userStore = useUserStore();
 const { accessToken } = userStore;
 // 表格配置项
-const columns: ColumnProps<SysUserPersonnel.SysUserPerInfo>[] = [
+const columns: ColumnProps<SysDepartment.DepartmentInfo>[] = [
   { type: "selection", fixed: "left", width: 50 },
   {
-    prop: "faceUrl",
-    label: "人脸",
-    render: scope => {
-      return (
-        <img src={scope.row.faces.length > 0 ? scope.row.faces[0].faceUrl : ''} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px;' alt=''/>
-      );
-    }
+    prop: "code",
+    label: "院系编号"
   },
   {
     prop: "name",
     label: "院系名称"
   },
-  {
-    prop: "personId",
-    label: "人员ID"
-  },
-  {
-    prop: "age",
-    label: "年龄"
-  },
-  {
-    prop: "personSetName",
-    label: "所属班级",
-  },
   { prop: "operation", label: "操作", width: 250, fixed: "right" }
 ];
 
 
-// 人员表单引用
+// 院系表单引用
 const formRef = ref<InstanceType<typeof Form> | null>(null);
 
 /**
@@ -89,24 +72,24 @@ const formRef = ref<InstanceType<typeof Form> | null>(null);
  * @param opt  操作类型
  * @param record  记录
  */
-function onOpen(opt: FormOptEnum, record: {} | SysUserPersonnel.SysUserPerInfo = {}) {
+function onOpen(opt: FormOptEnum, record: {} | SysDepartment.DepartmentInfo = {}) {
   formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
 }
 
 /**
- * 人员删除
+ * 院系删除
  * @param ids  id数组
  */
  async function onDelete(ids: string[], msg: string) {
   if(ids.length === 0){
     ElMessage({
-      message: '请选择要删除的人员',
+      message: '请选择要删除的院系',
       type: 'warning'
     });
     return
   }
   // 二次确认 => 请求api => 刷新表格
-  await useHandleData(userManageKeyPersonApi.delete, {id: ids.join(",") }, msg);
+  await useHandleData(userManageDepartmentApi.delete, {ids }, msg);
   RefreshTable(); //刷新表格
 }
 
@@ -115,53 +98,6 @@ const RefreshTable = () => {
   proTable.value?.refresh();
 }
 
-
-/** 更多下拉菜单命令枚举 */
-enum cmdEnum {
-  AddFace = "添加人脸",
-}
-/** 下拉菜单参数接口 */
-interface Command {
-  row: SysUserPersonnel.SysUserPerInfo;
-  command: cmdEnum;
-}
-
-/**配置command的参数 */
-function command(row: SysUserPersonnel.SysUserPerInfo, command: cmdEnum): Command {
-  return {
-    row: row,
-    command: command
-  };
-}
-/**
- * 列表更多下拉菜单点击事件
- * @param command
- */
-const personId = ref<number | string>(); //人员id
-function handleCommand(command: Command) {
-  switch (command.command) {
-    case cmdEnum.AddFace:
-      personId.value = command.row.personId; //获取人员id
-      break
-  }
-}
-
-
-
-
-
-const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => {
-  if (response.code === 200) {
-    userManageKeyPersonApi.addFace({
-      personId: personId.value,
-      faceUrl: response.data
-    }).then(res=>{
-      RefreshTable()
-    })
-  } else {
-    ElMessage.error(response.msg);
-  }
-};
 </script>
 <style scoped lang="scss">
 .table-box {
diff --git a/SafeCampus.WEB/src/views/userManage/major/components/form.vue b/SafeCampus.WEB/src/views/userManage/major/components/form.vue
new file mode 100644
index 0000000..07a1005
--- /dev/null
+++ b/SafeCampus.WEB/src/views/userManage/major/components/form.vue
@@ -0,0 +1,137 @@
+<!-- 
+ * @Description: 表单
+ * @Author: huguodong 
+ * @Date: 2023-12-15 15:45:28
+!-->
+<template>
+  <div>
+    <form-container v-model="visible" :title="`${majorProps.opt}专业`" form-size="600px">
+      <el-form
+        ref="majorFormRef"
+        :rules="rules"
+        :disabled="majorProps.disabled"
+        :model="majorProps.record"
+        :hide-required-asterisk="majorProps.disabled"
+        label-width="auto"
+        label-suffix=" :"
+      >
+        <s-form-item label="专业编号" prop="code">
+          <s-input v-model="majorProps.record.code"></s-input>
+        </s-form-item>
+        <s-form-item label="专业名称" prop="name">
+          <s-input v-model="majorProps.record.name"></s-input>
+        </s-form-item>
+        <s-form-item label="所属院系" prop="depId">
+          <s-select v-model="majorProps.record.depId" :options="treeData" label="name" value="id"></s-select>
+          <!-- <org-selector v-model:org-value="majorProps.record.depId" :org-tree-api="userManageDepartmentApi.list" :show-all="false" /> -->
+        </s-form-item>
+        <s-form-item label="专业简介" prop="introduce">
+          <s-input v-model="majorProps.record.introduce" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"></s-input>
+        </s-form-item>
+        <s-form-item label="排序" prop="sort">
+          <el-slider v-model="majorProps.record.sort" show-input :min="0" />
+        </s-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="onClose"> 取消 </el-button>
+        <el-button v-show="!majorProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
+      </template>
+    </form-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SysMajor, userManageMajorApi, userManageDepartmentApi } from "@/api";
+import { FormOptEnum, SysDictEnum } from "@/enums";
+import { required } from "@/utils/formRules";
+import { FormInstance } from "element-plus";
+import { useDictStore } from "@/stores/modules";
+
+const visible = ref(false); //是否显示表单
+const dictStore = useDictStore(); //字典仓库
+const treeData = ref<any>([]);
+const getRequestData = async () => {
+  const { data } = await userManageDepartmentApi.list({});
+  treeData.value = data;
+};
+// 表单参数
+const majorProps = reactive<FormProps.Base<any>>({
+  opt: FormOptEnum.ADD,
+  record: {},
+  disabled: false
+});
+
+// 表单验证规则
+const rules = reactive({
+  code: [required("请输入专业编号")],
+  name: [required("请输入专业名称")],
+  depId: [required("请选择所属院系")],
+  introduce: [required("请输入专业简介")]
+});
+
+/**
+ * 打开表单
+ * @param props 表单参数
+ */
+function onOpen(props: FormProps.Base<SysMajor.MajorInfo>) {
+  getRequestData();
+  Object.assign(majorProps, props); //合并参数
+  if (props.opt == FormOptEnum.ADD) {
+    //如果是新增,设置默认值
+    // majorProps.record.sortCode = 99;
+    // majorProps.record.status = statusOptions[0].value;
+  }
+  visible.value = true; //显示表单
+  if (props.record.id) {
+    majorProps.record = props.record;
+    //如果传了id，就去请求api获取record
+
+    userManageMajorApi.detail({ id: props.record.id }).then(res => {
+      majorProps.record = res.data;
+    });
+  }
+}
+
+// 提交数据（新增/编辑）
+const majorFormRef = ref<FormInstance>();
+/** 提交表单 */
+async function handleSubmit() {
+  majorFormRef.value?.validate(async valid => {
+    if (!valid) return; //表单验证失败
+    console.log(majorProps);
+    // return;
+    //提交表单
+    if (majorProps.opt == FormOptEnum.ADD) {
+      await userManageMajorApi
+        .add(majorProps.record, majorProps.record.id != undefined)
+        .then(() => {
+          majorProps.successful!(); //调用父组件的successful方法
+        })
+        .finally(() => {
+          onClose();
+        });
+    } else {
+      await userManageMajorApi
+        .update(majorProps.record, majorProps.record.id != undefined)
+        .then(() => {
+          majorProps.successful!(); //调用父组件的successful方法
+        })
+        .finally(() => {
+          onClose();
+        });
+    }
+  });
+}
+
+/** 关闭表单*/
+function onClose() {
+  visible.value = false;
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  onOpen
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/SafeCampus.WEB/src/views/userManage/major/index.vue b/SafeCampus.WEB/src/views/userManage/major/index.vue
new file mode 100644
index 0000000..8b5ac38
--- /dev/null
+++ b/SafeCampus.WEB/src/views/userManage/major/index.vue
@@ -0,0 +1,138 @@
+<!-- 
+ * @Description: 专业管理
+ * @Author: wwp
+ * @Date: 2024-7-15
+-->
+<template>
+  <div class="main-box">
+    <div class="table-box">
+      <ProTable ref="proTable" title="专业管理" :columns="columns" rowKey="id" :request-api="userManageMajorApi.page">
+        <!-- 表格 header 按钮 -->
+        <template #tableHeader="scope">
+          <s-button suffix="专业" @click="onOpen(FormOptEnum.ADD)" />
+          <s-button
+            type="danger"
+            :opt="FormOptEnum.DELETE"
+            plain
+            suffix="专业"
+            :disabled="!scope.isSelected"
+            @click="onDelete(scope.selectedListIds, '删除所选专业')"
+          />
+        </template>
+        <!-- 表格操作栏 -->
+        <template #operation="scope">
+          <el-space>
+            <s-button link :opt="FormOptEnum.EDIT" @click="onOpen(FormOptEnum.EDIT, scope.row)" />
+            <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.id], `删除专业`)" />
+          </el-space>
+        </template>
+      </ProTable>
+    </div>
+    <!-- 专业新增/编辑表单 -->
+    <Form ref="formRef"></Form>
+  </div>
+</template>
+<script setup lang="tsx" name="SysUserKeyPersonnel">
+import { userManageMajorApi,SysMajor,userManageDepartmentApi } from "@/api";
+import { useHandleData } from "@/hooks/useHandleData";
+import { FormOptEnum } from "@/enums";
+import Form from "./components/form.vue";
+import { ArrowDown } from "@element-plus/icons-vue";
+import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
+import { ElMessage } from "element-plus";
+import { useUserStore } from "@/stores/modules";
+import { TokenEnum } from "@/enums";
+import type { UploadProps } from "element-plus";
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const faceUrl = ref('');
+const visible = ref(false); //是否显示专业表单
+const proTable = ref<ProTableInstance>();
+const userStore = useUserStore();
+const { accessToken } = userStore;
+let departmentOptions = ref<any>([]);
+onMounted(() => {
+  getDepartmentList();
+});
+
+const getDepartmentList = async () => {
+  const { data } = await userManageDepartmentApi.list({});
+  departmentOptions.value = data;
+};
+
+// 表格配置项
+const columns: ColumnProps<SysMajor.MajorInfo>[] = [
+  { type: "selection", fixed: "left", width: 50 },
+  {
+    prop: "depId",
+    label: "所属院系",
+    enum: departmentOptions, 
+    search: { 
+      el: "select",
+      // span: 1
+    },
+    fieldNames: { label: "name", value: "id" } 
+  },
+  {
+    prop: "code",
+    label: "专业编号"
+  },
+  {
+    prop: "name",
+    label: "专业名称"
+  },
+  {
+    prop: "introduce",
+    label: "专业简介"
+  },
+  { prop: "operation", label: "操作", width: 250, fixed: "right" }
+];
+
+// 专业表单引用
+const formRef = ref<InstanceType<typeof Form> | null>(null);
+
+/**
+ * 打开表单
+ * @param opt  操作类型
+ * @param record  记录
+ */
+function onOpen(opt: FormOptEnum, record: {} | SysMajor.MajorInfo = {}) {
+  formRef.value?.onOpen({ opt: opt, record: record, successful: RefreshTable });
+}
+
+/**
+ * 专业删除
+ * @param ids  id数组
+ */
+ async function onDelete(ids: string[], msg: string) {
+  if(ids.length === 0){
+    ElMessage({
+      message: '请选择要删除的专业',
+      type: 'warning'
+    });
+    return
+  }
+  // 二次确认 => 请求api => 刷新表格
+  await useHandleData(userManageMajorApi.delete, {ids}, msg);
+  RefreshTable(); //刷新表格
+}
+
+// 刷新表格
+const RefreshTable = () => {
+  proTable.value?.refresh();
+}
+
+</script>
+<style scoped lang="scss">
+.table-box {
+  width: 100%;
+  height: 100%;
+}
+.custom-tree-node {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 8px;
+  font-size: 14px;
+}
+</style>