修改

src/views/stamp/list/index.vue

@@ -1,244 +1,488 @@
 <template>
-    <div class="app-container">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="岗位编码" prop="code">
-          <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery"/>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="会议ID" prop="reserveId">
+        <el-input v-model="queryParams.reserveId" placeholder="请输入会议ID" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="会议名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入会议名称" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="会议地点" prop="groomId">
+        <el-select v-model="queryParams.groomId" placeholder="会议地点" clearable>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label"
+            :value="parseInt(dict.value)" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['meeting:reserveList:create']">新增</el-button>
+      </el-col>
+      <!-- <el-col :span="1.5">
+          <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                     v-hasPermi="['meeting:reserveList:export']">导出</el-button>
+        </el-col> -->
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="postList">
+      <el-table-column label="会议ID" align="center" prop="reserveId" />
+      <el-table-column label="会议名称" align="center" prop="name" />
+      <el-table-column label="会议地点" align="center" prop="groomName" />
+      <el-table-column label="会议开始时间" align="center" prop="startTime" />
+      <el-table-column label="会议结束时间" align="center" prop="endTime" />
+      <el-table-column label="申请人" align="center" prop="applyUser" />
+      <el-table-column label="申请部门" align="center" prop="deptName" />
+      <el-table-column label="参会人数" align="center" prop="num" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['meeting:reserveList:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['meeting:reserveList:delete']">删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-detail" @click="handleDetail(scope.row)"
+            v-hasPermi="['meeting:reserveList:detail']">详情</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="会议名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入会议名称" />
+        </el-form-item>
+        <el-form-item label="会议地点" prop="groomId">
+          <el-radio-group v-model="form.groomId">
+            <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+              {{ dict.label }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker v-model="form.startTime" style="width: 100%" type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择会议开始时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker v-model="form.endTime" style="width: 100%" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择会议结束时间">
+          </el-date-picker>
         </el-form-item>
-        <el-form-item label="岗位名称" prop="name">
-          <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery"/>
+        <el-form-item label="申请人" prop="applyUser">
+          <el-input v-model="form.applyUser" placeholder="申请人" />
         </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
-            <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
-          </el-select>
+        <el-form-item label="申请部门" prop="deptName">
+          <el-input v-model="form.deptName" placeholder="申请部门" />
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        <el-form-item label="参会人员" prop="peopleList">
+          <el-input type="textarea" v-model="form.peopleList" style="display: none;" />
+          <el-button class="button-new-tag" @click="openPS" size="small">+ 添加</el-button>
+          <span v-for="(tag, index) in nikeNamelist" :key="index">
+            <!-- <i class="el-icon-arrow-right"></i> -->
+            &nbsp;
+            <el-tag type="info" closable :disable-transitions="false" @close="handleClose(index)">
+              <span class="user-avatar">{{ tag.substring(0, 1) || 'U' }}</span>
+              {{ tag }}
+            </el-tag>
+          </span>
+
+        </el-form-item>
+
+        <el-form-item label="会议内容">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
-  
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-                     v-hasPermi="['system:post:create']">新增</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
-                     v-hasPermi="['system:post:export']">导出</el-button>
-        </el-col>
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-  
-      <el-table v-loading="loading" :data="postList">
-        <el-table-column label="岗位编号" align="center" prop="id" />
-        <el-table-column label="岗位编码" align="center" prop="code" />
-        <el-table-column label="岗位名称" align="center" prop="name" />
-        <el-table-column label="岗位排序" align="center" prop="sort" />
-        <el-table-column label="状态" align="center" prop="status">
-          <template v-slot="scope">
-            <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
-          </template>
-        </el-table-column>
-        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-          <template v-slot="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template v-slot="scope">
-            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                       v-hasPermi="['system:post:update']">修改</el-button>
-            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                       v-hasPermi="['system:post:delete']">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-  
-      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
-                  @pagination="getList"/>
-  
-      <!-- 添加或修改岗位对话框 -->
-      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-          <el-form-item label="岗位名称" prop="name">
-            <el-input v-model="form.name" placeholder="请输入岗位名称" />
-          </el-form-item>
-          <el-form-item label="岗位编码" prop="code">
-            <el-input v-model="form.code" placeholder="请输入编码名称" />
-          </el-form-item>
-          <el-form-item label="岗位顺序" prop="sort">
-            <el-input-number v-model="form.sort" controls-position="right" :min="0" />
-          </el-form-item>
-          <el-form-item label="岗位状态" prop="status">
-            <el-radio-group v-model="form.status">
-              <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
-                {{dict.label}}</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="备注" prop="remark">
-            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 详情对话框 -->
+    <el-dialog :title="title" :visible.sync="openDetail" width="800px" append-to-body>
+      <div class="widget-wrapper">
+        <div class="widget-list" v-loading="loading">
+          <div class="fx-field x-grid-col-12">
+            <div class="field-label">
+              <span class="field-required">*</span>
+              <div class="field-name">会议名称</div>
+            </div>
+            <div class="field-component">
+              <span :title="form.name">{{ form.name }}</span>
+            </div>
+          </div>
+          <div class="fx-field x-grid-col-12">
+            <div class="field-label">
+              <span class="field-required">*</span>
+              <div class="field-name">开始时间</div>
+            </div>
+            <div class="field-component">
+              <span :title="form.startTime">{{ form.startTime }}</span>
+            </div>
+          </div>
+          <div class="fx-field x-grid-col-12">
+            <div class="field-label">
+              <span class="field-required">*</span>
+              <div class="field-name">结束时间</div>
+            </div>
+            <div class="field-component">
+              <span :title="form.endTime">{{ form.endTime }}</span>
+            </div>
+          </div>
+
+          <div class="fx-field x-grid-col-12">
+            <div class="field-label">
+              <span class="field-required">*</span>
+              <div class="field-name">申请人</div>
+            </div>
+            <div class="field-component">
+              <span :title="form.applyUser">{{ form.applyUser }}</span>
+            </div>
+          </div>
+          <div class="fx-field x-grid-col-12">
+            <div class="field-label">
+              <span class="field-required">*</span>
+              <div class="field-name">申请部门</div>
+            </div>
+            <div class="field-component">
+              <span :title="form.deptName">{{ form.deptName }}</span>
+            </div>
+          </div>
+
+
+          <div class="fx-field x-grid-col-12">
+            <div class="field-label">
+              <span class="field-required">*</span>
+              <div class="field-name">参会人员</div>
+            </div>
+            <div class="field-component">
+              <span v-for="(tag, index) in form.nikeNamelist" :key="index">
+            &nbsp;
+            <el-tag type="info" :disable-transitions="false">
+              <span class="user-avatar">{{ tag.substring(0, 1) || 'U' }}</span>
+              {{ tag }}
+            </el-tag>
+          </span>
+            </div>
+          </div>
+          <div class="fx-field x-grid-col-12">
+            <div class="field-label">
+              <div class="field-name">会议内容</div>
+            </div>
+            <div class="field-component">
+              <span :title="form.remark">{{ form.remark }}</span>
+            </div>
+          </div>
         </div>
-      </el-dialog>
-    </div>
-  </template>
-  
-  <script>
-  import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/meeting";
-  
-  import {CommonStatusEnum} from '@/utils/constants'
-  import { getDictDatas, DICT_TYPE } from '@/utils/dict'
-  
-  export default {
-    name: "SystemPost",
-    data() {
-      return {
-        // 遮罩层
-        loading: true,
-        // 导出遮罩层
-        exportLoading: false,
-        // 显示搜索条件
-        showSearch: true,
-        // 总条数
-        total: 0,
-        // 岗位表格数据
-        postList: [],
-        // 弹出层标题
-        title: "",
-        // 是否显示弹出层
-        open: false,
-        // 查询参数
-        queryParams: {
-          pageNo: 1,
-          pageSize: 10,
-          code: undefined,
-          name: undefined,
-          status: undefined
-        },
-        // 表单参数
-        form: {},
-        // 表单校验
-        rules: {
-          name: [
-            { required: true, message: "岗位名称不能为空", trigger: "blur" }
-          ],
-          code: [
-            { required: true, message: "岗位编码不能为空", trigger: "blur" }
-          ],
-          sort: [
-            { required: true, message: "岗位顺序不能为空", trigger: "blur" }
-          ]
-        },
-  
-        // 枚举
-        CommonStatusEnum: CommonStatusEnum,
-        // 数据字典
-        statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+      </div>
+    </el-dialog>
+    <PeopleSelect ref="peopleSelect" type="multiple" :isCheck="true" :open="peopleOpen" @cancel="peopleOpen = false"
+      @submit="submitPeople"></PeopleSelect>
+  </div>
+</template>
+
+<script>
+import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/meeting";
+import PeopleSelect from "@/components/PeopleSelect/index.vue";
+import { CommonStatusEnum } from '@/utils/constants'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+
+export default {
+  name: "SystemPost",
+  components: {
+    PeopleSelect,
+  },
+  data() {
+    return {
+      nikeNamelist: [],
+      //是否打开选人组件，默认不打开
+      peopleOpen: false,
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 岗位表格数据
+      postList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      openDetail: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        reserveId: undefined,
+        name: undefined,
+        groomId: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "会议名称不能为空", trigger: "blur" }
+        ],
+        groomId: [
+          { required: true, message: "会议室不能为空", trigger: "blur" }
+        ],
+        startTime: [
+          { required: true, message: "会议开始时间不能为空", trigger: "blur" }
+        ],
+        endTime: [
+          { required: true, message: "会议结束时间不能为空", trigger: "blur" }
+        ],
+        applyUser: [
+          { required: true, message: "申请人不能为空", trigger: "blur" }
+        ],
+        deptName: [
+          { required: true, message: "申请人部门不能为空", trigger: "blur" }
+        ],
+        peopleList: [
+          { required: true, message: '参会人员不能为空', }
+        ]
+      },
+
+      // 枚举
+      CommonStatusEnum: CommonStatusEnum,
+      // 数据字典
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 关闭标签
+    handleClose(index) {
+      this.form.peopleList.splice(index, 1);
+      this.nikeNamelist.splice(index, 1);
+    },
+    //打开选人弹窗
+    openPS() {
+      this.peopleOpen = true;
+    },
+    //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
+    submitPeople(userNamelist, nikeNamelist, userIdList) {
+      console.log(userNamelist);
+      this.nikeNamelist = nikeNamelist;
+      this.form.peopleList = userIdList;
+      this.peopleOpen = false;
+    },
+    /** 查询岗位列表 */
+    getList() {
+      this.loading = true;
+      listPost(this.queryParams).then(response => {
+        this.postList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        name: undefined,
+        groomId: undefined,
+        startTime: undefined,
+        endTime: undefined,
+        applyUser: undefined,
+        deptName: undefined,
+        peopleList: undefined,
+        remark: undefined
       };
+      this.resetForm("form");
     },
-    created() {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
       this.getList();
     },
-    methods: {
-      /** 查询岗位列表 */
-      getList() {
-        this.loading = true;
-        listPost(this.queryParams).then(response => {
-          this.postList = response.data.list;
-          this.total = response.data.total;
-          this.loading = false;
-        });
-      },
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.form = {
-          id: undefined,
-          code: undefined,
-          name: undefined,
-          sort: 0,
-          status: CommonStatusEnum.ENABLE,
-          remark: undefined
-        };
-        this.resetForm("form");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNo = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.reset();
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加岗位";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id
+      getPost(id).then(response => {
+        this.form = response.data;
         this.open = true;
-        this.title = "添加岗位";
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        const id = row.id
-        getPost(id).then(response => {
-          this.form = response.data;
-          this.open = true;
-          this.title = "修改岗位";
-        });
-      },
-      /** 提交按钮 */
-      submitForm: function() {
-        this.$refs["form"].validate(valid => {
-          if (valid) {
-            if (this.form.id !== undefined) {
-              updatePost(this.form).then(response => {
-                this.$modal.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              });
-            } else {
-              addPost(this.form).then(response => {
-                this.$modal.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              });
-            }
+        this.title = "修改岗位";
+      });
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      this.reset();
+      const id = row.id
+      getPost(id).then(response => {
+        this.form = response.data;
+        this.openDetail = true;
+        this.title = "详情";
+      });
+    },
+
+    /** 提交按钮 */
+    submitForm: function () {
+      console.log(this.form);
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updatePost(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addPost(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
           }
-        });
-      },
-      /** 删除按钮操作 */
-      handleDelete(row) {
-        const ids = row.id;
-        this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function() {
-            return delPost(ids);
-          }).then(() => {
-            this.getList();
-            this.$modal.msgSuccess("删除成功");
-        }).catch(() => {});
-      },
-      /** 导出按钮操作 */
-      handleExport() {
-        const queryParams = this.queryParams;
-        this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
-            this.exportLoading = true;
-            return exportPost(queryParams);
-          }).then(response => {
-            this.$download.excel(response, '岗位数据.xls');
-            this.exportLoading = false;
-        }).catch(() => {});
-      }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id;
+      this.$modal.confirm('是否确认删除岗位编号为"' + ids + '"的数据项?').then(function () {
+        return delPost(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => { });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有岗位数据项?').then(() => {
+        this.exportLoading = true;
+        return exportPost(queryParams);
+      }).then(response => {
+        this.$download.excel(response, '岗位数据.xls');
+        this.exportLoading = false;
+      }).catch(() => { });
     }
-  };
-  </script>
-  
+  }
+};
+</script>
+<style lang="scss" scoped>
+.user-avatar {
+  width: 22px;
+  height: 22px;
+  line-height: 19px;
+  font-size: 12px;
+  background: #46c26f;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  color: #fff;
+  display: inline-block;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
+  margin-bottom: 2px;
+}
+
+.el-tag+.el-tag {
+  margin-left: 10px;
+}
+
+.button-new-tag {
+  margin-right: 10px;
+  height: 30px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.widget-wrapper>.widget-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.x-grid-col-6 {
+  width: 50%;
+}
+
+.x-grid-col-12 {
+  width: 100%;
+}
+
+.fx-field {
+  line-height: 20px;
+  padding: 7px 12px 12px;
+  position: relative;
+}
+
+.fx-field .field-label {
+  word-wrap: break-word;
+  color: #141e31;
+  display: flex;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 5px 0;
+  position: relative;
+  word-break: break-word;
+}
+
+.fx-field .field-label .field-required {
+  color: #eb5050;
+  margin-left: -6px;
+  position: relative;
+}
+
+.fx-field .field-label .field-name {
+  overflow: hidden;
+}
+
+.field-component {
+  word-wrap: break-word;
+  background: #f5f6f8;
+  border-radius: 2px;
+  color: #141e31;
+  font-size: 14px;
+  line-height: 20px;
+  min-height: 32px;
+  padding: 6px 8px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+ul {
+  padding-left: 0px !important;
+}
+
+.el-tag+.el-tag {
+  margin-left: 10px;
+}
+</style>