party_construct_web/src/views/PartyBuildingMgr/FullPartyMember/FullPartyMemberIndex.vue

<!--
 * @Description: 党建管理 => 正式党员管理
 * @Author: Rockery
 * @Date: 2021-12-10 10:39:07
 * @LastEditors: Rockery
 * @LastEditTime: 2022-03-03 10:01:39
 * @FilePath: \party_construct_web\src\views\PartyBuildingMgr\FullPartyMember\FullPartyMemberIndex.vue
 * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
-->

<template>
  <div class="app-container fullpartymember">
    <template v-if="pageType == 'LIST'">
      <div class="fullpartymember-listpage">
        <div class="fullpartymember-head">
          <div class="fullpartymember-head-title">
            <div>
              <img
                :src="require('@/assets/logo/home-main-title-logo.png')"
                @error="imgViewerOnerror"
              />
            </div>
            <div>正式党员管理</div>
          </div>
          <div class="fullpartymember-head-btn">
            <div>列表样式</div>
            <svg-icon
              icon-class="partydatacard"
              class="fullpartymember-head-btn-card"
              :class="{ 'is-active': listActiveType === 'CARDLIST' }"
              @click="handleCardListClick"
            />
            <svg-icon
              icon-class="partydatalist"
              class="fullpartymember-head-btn-list"
              :class="{ 'is-active': listActiveType === 'TABLELIST' }"
              @click="handleTableListClick"
            />
          </div>
        </div>

        <div class="app-container-queryform" v-show="showSearch">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item prop="beginTime">
              <el-date-picker
                v-model="queryParams.beginTime"
                type="date"
                size="small"
                clearable
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
                placeholder="请选择入党开始时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="queryParams.endTime"
                type="date"
                size="small"
                clearable
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
                placeholder="请选择入党结束时间"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入姓名"
                clearable
                size="small"
                style="width: 100%;"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="sex">
              <el-select
                v-model="queryParams.sex"
                placeholder="请选择性别"
                clearable
                size="small"
                style="width: 100%;"
              >
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                v-hasPermi="['partybuildingmgr:fullpartymember:query']"
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQueryClick"
              >搜索</el-button>
              <el-button
                v-hasPermi="['partybuildingmgr:fullpartymember:reset']"
                icon="el-icon-refresh"
                size="mini"
                @click="resetQueryClick"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="app-container-main fullpartymember-main" :class="showSearch ? 'mt15' : ''">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                v-hasPermi="['partybuildingmgr:fullpartymember:add']"
                type="rocpartyprimarybtn"
                icon="el-icon-plus"
                @click="handleAddClick"
              >新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
          <el-row :gutter="10">
            <template v-if="listActiveType === 'CARDLIST'">
              <el-col :span="24">
                <div class="fullpartymember-main-list">
                  <template v-if="tableList.length > 0">
                    <div class="list-row">
                      <div
                        v-for="item in tableList"
                        :key="'FULLPARTYMEMBERCARDLIST_' + item.id"
                        class="list-cell"
                      >
                        <div class="list-cell-img">
                          <div v-show="item.status !== 0" class="list-cell-img-type">
                            <div
                              class="list-cell-img-type-content"
                            >{{ fullPartyMemberStatusObj[item.status] }}</div>
                          </div>
                          <img
                            :src="item.personPhoto ? (viewPdfFileUrlPrefix + item.personPhoto) : require('@/assets/images/tentative-img.png')"
                            data-index="FULLPARTYMEMBER"
                            @error="imgViewerOnerror"
                          />
                          <div class="list-cell-shield">
                            <div class="list-cell-shield-content">
                              <div class="shield-content-label">入党时间</div>
                              <div
                                class="shield-content-datetime"
                              >{{ parseTime(item.addPartyTime, '{y}年{m}月{d}日') || ((item.isOld === 1) ? '待补充' : '待更新') }}</div>
                              <el-button
                                v-hasPermi="['partybuildingmgr:fullpartymember:view']"
                                type="rocwhiteplainbtn"
                                icon="el-icon-view"
                                style="width: 100%;"
                                @click="handleViewClick(item)"
                              >查看资料</el-button>
                              <el-button
                                v-hasPermi="['partybuildingmgr:fullpartymember:edit']"
                                type="rocwhiteplainbtn"
                                icon="el-icon-edit"
                                style="width: 100%;"
                                class="shield-content-edit"
                                @click="handleEditClick(item)"
                              >编辑</el-button>
                              <div
                                v-hasPermi="['partybuildingmgr:fullpartymember:reactivate']"
                                class="shield-content-relation"
                                @click="handleReactivateClick(item)"
                              >组织关系变更&nbsp;&nbsp;&gt;</div>
                            </div>
                          </div>
                        </div>
                        <div class="list-cell-name">{{ item.name || '—' }}</div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="fullpartymember-main-list-nodata">暂无数据</div>
                  </template>
                </div>
              </el-col>
            </template>
            <template v-else>
              <el-col :span="24" class="mt15">
                <el-table
                  :data="tableList"
                  stripe
                  border
                  :header-cell-style="{'text-align':'center'}"
                  header-row-class-name="develop-table_header-row"
                  class="develop-main-table"
                  style="width: 100%;"
                >
                  <el-table-column label="党员姓名" prop="name" :show-overflow-tooltip="true" />
                  <el-table-column
                    label="性别"
                    prop="sex"
                    align="center"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.sex || ((scope.row.isOld === 1) ? '待补充' : '待更新') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="党龄" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ getPartyStanding(parseTime(scope.row.applyAddPartyTime, '{y}-{m}-{d}'), parseTime(scope.row.addPartyTime, '{y}-{m}-{d}'), scope.row.isOld) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="入党介绍人"
                    prop="addPartyIntroducer"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.addPartyIntroducer || ((scope.row.isOld === 1) ? '待补充' : '待更新') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="申请入党时间"
                    prop="applyAddPartyTime"
                    align="center"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.applyAddPartyTime, '{y}-{m}-{d}') || ((scope.row.isOld === 1) ? '待补充' : '待更新') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="正式入党时间"
                    prop="addPartyTime"
                    align="center"
                    :show-overflow-tooltip="true"
                  >
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.addPartyTime, '{y}-{m}-{d}') || ((scope.row.isOld === 1) ? '待补充' : '待更新') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    width="260"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="scope">
                      <el-button
                        v-hasPermi="['partybuildingmgr:fullpartymember:view']"
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        style="color: #909399;"
                        @click="handleViewClick(scope.row)"
                      >详情</el-button>
                      <el-button
                        v-hasPermi="['partybuildingmgr:fullpartymember:edit']"
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        style="color: #67c23a;"
                        @click="handleEditClick(scope.row)"
                      >编辑</el-button>
                      <el-button
                        v-hasPermi="['partybuildingmgr:fullpartymember:reactivate']"
                        size="mini"
                        type="text"
                        style="color: #de0010;"
                        @click="handleReactivateClick(scope.row)"
                      >
                        <svg-icon icon-class="relachange" />&nbsp;&nbsp;组织关系变更
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </template>
            <el-col :span="24">
              <pagination
                v-show="total>0"
                :total="total"
                :pageSizes="[14, 28, 42, 56, 70]"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="refreshData"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </template>
    <template v-else-if="pageType == 'ADD'">
      <div class="fullpartymember-addpage">
        <div class="fullpartymember-addpage-head">
          <div class="fullpartymember-addpage-head-title">
            <div>
              <img
                :src="require('@/assets/logo/home-main-title-logo.png')"
                @error="imgViewerOnerror"
              />
            </div>
            <div>正式党员管理（{{ updateTypeObj[updateType] }}）</div>
          </div>
        </div>
        <update-party-develop
          :id="currentRow.id"
          :is-old="isOld"
          :operate-type.sync="operateType"
          :update-type="updateType"
          @page-submit="handleAddPageSubmitClick"
          @page-close="handleAddPageCloseClick"
        />
      </div>
    </template>
    <template v-else-if="pageType == 'VIEW'">
      <div class="toptitlepage">
        <div class="toptitlepage-head">
          <div class="toptitlepage-head-title">
            <div>
              <img
                :src="require('@/assets/logo/home-main-title-logo.png')"
                @error="imgViewerOnerror"
              />
            </div>
            <div>正式党员管理（查看资料）</div>
          </div>
        </div>
        <party-member-details :id="currentRow.id" @page-close="handleViewPageCloseClick" />
      </div>
    </template>
    <template v-else>
      <div>&nbsp;</div>
    </template>

    <!-- 组织关系变更对话框 -->
    <el-dialog
      title="组织关系变更"
      :visible.sync="orgRelationChangeObj.open"
      width="700px"
      append-to-body
      :destroy-on-close="true"
      :close-on-click-modal="false"
      class="orgrelationchange-dialog"
    >
      <el-form
        ref="orgRelationChangeFormRef"
        :model="orgRelationChangeObj.form"
        :rules="orgRelationChangeObj.rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="变更时间：" prop="modifyTime">
              <el-date-picker
                v-model="orgRelationChangeObj.form.modifyTime"
                type="date"
                clearable
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
                placeholder="请选择变更时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名：" prop="memberName">
              <el-input
                v-model="orgRelationChangeObj.form.memberName"
                :disabled="!(!orgRelationChangeObj.currentRow.name)"
                clearable
                placeholder="请输入姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号：" prop="cardNo">
              <el-input
                v-model="orgRelationChangeObj.form.cardNo"
                :disabled="!(!orgRelationChangeObj.currentRow.cardNo)"
                clearable
                placeholder="请输入身份证号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型：" prop="modifyType">
              <el-select
                v-model="orgRelationChangeObj.form.modifyType"
                placeholder="请选择类型"
                clearable
                size="small"
                style="width: 100%;"
              >
                <el-option
                  v-for="orgRelationChangeTypeOption in orgRelationChangeTypeOptions"
                  :key="orgRelationChangeTypeOption.dictValue"
                  :label="orgRelationChangeTypeOption.dictLabel"
                  :value="orgRelationChangeTypeOption.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="相关材料：" prop="relatedFile">
              <roc-img-pdf-file-upload
                key="ROCPDFFILEUPLOADFULLPARTYMEMBERATTACHMENTKEY"
                v-model="orgRelationChangeObj.form.relatedFile"
                upload-file-title="相关材料"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="说明：" prop="remark">
              <el-input
                v-model="orgRelationChangeObj.form.remark"
                type="textarea"
                :autosize="{ minRows: 4}"
                placeholder="请输入说明"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="rocpartyprimaryplainbtn" @click="orgRelationChangeCancelClick">取 消</el-button>
        <el-button
          :disabled="!orgRelationChangeObj.form.modifyTime || !orgRelationChangeObj.form.memberName || !orgRelationChangeObj.form.cardNo || !orgRelationChangeObj.form.modifyType"
          type="rocpartyprimarybtn"
          @click="orgRelationChangeSubmitForm"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listFullPartyMember } from "@/api/PartyBuildingMgr/FullPartyMember";
import { addOrgRelationship } from "@/api/PartyBuildingMgr/OrgRelationship";

export default {
  name: "Fullpartymember",
  components: {
    'roc-img-pdf-file-upload': () => import('@/components/RocImgPdfFileUpload'),
    'update-party-develop': () => import('@/components/UpdatePartyDevelop'),
    'party-member-details': () => import('@/components/PartyMemberDetails')
  },
  data() {
    return {
      // 页面类型
      pageType: 'LIST',
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 列表样式
      listActiveType: 'CARDLIST',
      // 查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 14,
        orderByColumn: 'id',
        isAsc: 'desc'
      },
      // 数据总条数
      total: 10,
      // 表格列表
      tableList: [],
      orgRelationChangeObj: {
        open: false,
        form: {},
        rules: {
          modifyTime: [
            { required: true, message: "变更时间不能为空", trigger: ['change', 'blur'] }
          ],
          memberName: [
            { required: true, message: "姓名不能为空", trigger: 'blur' }
          ],
          cardNo: [
            { required: true, message: "身份证号不能为空", trigger: 'blur' },
            {
              pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
              message: "请输入正确身份证号",
              trigger: 'blur'
            }
          ],
          modifyType: [
            { required: true, message: "类型不能为空", trigger: ['change', 'blur'] }
          ]
        },
        currentRow: {}
      },
      orgRelationChangeTypeOptions: [],
      viewPdfFileUrlPrefix: `${window.origin}${process.env.VUE_APP_FILE_VIEW_API}`,
      fullPartyMemberStatusObj: {
        '1': '转出',
        '2': '退党',
        '3': '开除',
        '4': '去世',
        '5': '退休'
      },
      updateTypeObj: {
        'ADD': '新增',
        'EDIT': '编辑'
      },
      isOld: 1, // 是否是直接录入正式党员信息，0：不是，1：是
      currentRow: {}
    };
  },
  created() {
    this.initData();
  },
  methods: {
    /** 初始化数据 */
    async initData() {
      this.listActiveType = 'CARDLIST';
      this.refreshData();
    },
    /** 刷新数据 */
    async refreshData() {
      this.loading = true;
      this.getList();
    },
    /** 获取表格数据 */
    getList() {
      this.loading = true;
      listFullPartyMember(this.queryParams).then(
        response => {
          this.tableList = response.rows || [];
          this.total = response.total ?? 0;
          this.loading = false;
          this.pageType = 'LIST';
        }
      );
    },
    /**
     * 获取次要选项列表
     */
    async getSubOptions() {
      // 组织关系变更类型列表
      await this.getDicts('org_relation_change_type').then(response => {
        const orgRelationOptions = response?.data || [];
        this.orgRelationChangeTypeOptions = orgRelationOptions.filter((item) => {
          return item.dictValue !== '0';
        });
      });
    },
    /**
     * 卡片列表图标事件
     */
    handleCardListClick() {
      this.listActiveType = 'CARDLIST';
    },
    /**
     * 表格列表图标事件
     */
    handleTableListClick() {
      this.listActiveType = 'TABLELIST';
    },
    /**
     * 搜索按钮事件
     */
    handleQueryClick() {
      this.queryParams.pageNum = 1;
      this.refreshData();
    },
    /**
     * 重置按钮事件
     */
    resetQueryClick() {
      this.resetForm("queryForm");
      this.handleQueryClick();
    },
    /**
     * 新增按钮事件
     */
    handleAddClick() {
      this.currentRow = {};
      this.isOld = 1;
      this.pageType = 'ADD';
      this.operateType = 'ADD';
      this.updateType = 'ADD';
    },
    /**
     * 编辑按钮事件
     */
    handleEditClick(row) {
      if (!row.id) return;
      this.isOld = row.isOld;
      this.pageType = 'ADD';
      this.operateType = 'EDIT';
      this.updateType = 'EDIT';
      this.currentRow = row;
    },
    /**
     * 查看详情按钮事件
     */
    handleViewClick(row) {
      if (!row?.id) return;
      this.pageType = 'VIEW';
      this.currentRow = row;
    },
    /**
     * 组织关系变更事件
     */
    async handleReactivateClick(row) {
      if (!row?.name) return;

      // 初始化数据
      this.orgRelationChangeObj.form = {};
      this.resetForm("orgRelationChangeFormRef");
      await this.getSubOptions();

      // 绑定数据
      this.orgRelationChangeObj.currentRow = row;
      this.orgRelationChangeObj.form = {
        memberId: row?.id,
        memberName: row?.name,
        cardNo: row?.cardNo
      };
      this.orgRelationChangeObj.open = true;
    },
    /**
     * 组织关系变更对话框确定按钮事件
     */
    orgRelationChangeSubmitForm() {
      this.$refs["orgRelationChangeFormRef"].validate(valid => {
        if (valid) {
          this.$confirm('是否确认当前操作?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            addOrgRelationship(this.orgRelationChangeObj.form).then(
              () => {
                this.msgSuccess("组织关系变更成功！");
                this.orgRelationChangeCancelClick();
                this.pageType = 'LIST';
                this.refreshData();
              }
            );
          }).catch(() => { });
        }
      });
    },
    /**
     * 组织关系变更对话框取消按钮事件
     */
    orgRelationChangeCancelClick() {
      this.orgRelationChangeObj.open = false;
      this.orgRelationChangeObj.currentRow = {};
      this.orgRelationChangeObj.form = {};
      this.resetForm("orgRelationChangeFormRef");
    },
    /**
     * 新增页面保存按钮事件
     */
    handleAddPageSubmitClick(param) {
      this.pageType = param;
      this.refreshData();
    },
    /**
     * 新增页面取消按钮事件
     */
    handleAddPageCloseClick(param) {
      this.pageType = param;
      this.refreshData();
    },
    /**
     * 详情页面关闭按钮事件
     */
    handleViewPageCloseClick(param) {
      this.pageType = param;
      this.refreshData();
    },
    /**
     * 根据两个指定日期计算党龄
     * @applyAddPartyDate [String] 出生日期，格式为"1990-01-01"
     * @addPartyDate [String] 指定日期，格式为"1990-01-01"
     */
    getPartyStanding(applyAddPartyDate, addPartyDate, isOld) {
      // 不存在数据
      if (!applyAddPartyDate || !addPartyDate) {
        return (isOld === 1) ? '待补充' : '待更新';
      }

      // 初始化数据
      const [applyAddPartyDateArr, addPartyDateArr] = [applyAddPartyDate.split("-"), addPartyDate.split("-")];

      // 出生日期数据
      const [birthYear, birthMonth, birthDay] = applyAddPartyDateArr;

      // 指定日期数据
      const [specifyYear, specifyMonth, specifyDay] = addPartyDateArr;

      if (specifyYear == birthYear) {
        return 0; // 同年 则为0岁
      } else {
        // 年之差
        const ageDiff = specifyYear - birthYear;

        if (ageDiff > 0) {

          // 月份相等
          if (specifyMonth == birthMonth) {

            // 日之差
            const dayDiff = specifyDay - birthDay;

            // 日之差小于0
            if (dayDiff < 0) {
              return ageDiff - 1;
            }

            return ageDiff; // 日之差大于等于0
          }

          // 月之差
          const monthDiff = specifyMonth - birthMonth;

          // 月之差小于0
          if (monthDiff < 0) {
            return ageDiff - 1;
          }

          return ageDiff; // 月之差大于等于0
        }

        return (isOld === 1) ? '待补充' : '待更新'; // 返回— 表示出生日期输入错误或晚于今天
      }
    }
  }
};
</script>

<style scoped lang="scss">
.fullpartymember {
  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 100%;
    padding: 10px 20px;
    background-color: #ffffff;
    border-radius: 10px;

    &-title {
      display: flex;
      align-items: center;

      div {
        &:first-child {
          height: 37px;
          line-height: 37px;
        }

        &:last-child {
          margin-left: 15px;
          height: 37px;
          font-size: 26px;
          font-weight: 400;
          color: #4f4f4f;
          line-height: 37px;
          letter-spacing: 1px;
        }

        img {
          width: 34px;
          height: 34px;
        }
      }
    }

    &-btn {
      display: flex;
      align-items: center;

      div {
        &:first-child {
          margin-right: 15px;
          height: 37px;
          font-size: 16px;
          font-weight: 400;
          color: #646464;
          line-height: 37px;
          letter-spacing: 1px;
        }
      }

      &-card {
        margin-right: 10px;
        font-size: 26px;
        cursor: pointer;
        color: #909090;

        &.is-active {
          color: #e53333;
        }
      }

      &-list {
        font-size: 28px;
        cursor: pointer;
        color: #909090;

        &.is-active {
          color: #e53333;
        }
      }
    }
  }

  &-main {
    padding: 20px 20px 72px;
    min-height: 660px;
    background: url("../../../assets/images/home-head-img.png"), #ffffff;
    background-size: 67px 67px, cover;
    background-position: right 20px bottom 5px, center;
    background-repeat: no-repeat, no-repeat;
    border-radius: 10px;

    &-list {
      position: relative;
      margin: 20px 0 10px;
      width: 100%;

      .list-row {
        position: relative;
        width: 100%;

        .list-cell {
          float: left;
          margin: 0 10px 20px 10px;
          // overflow: hidden;
          width: 203px;
          height: 283px;
          background: #de0010;

          &-name {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -5px;
            width: 100%;
            height: 45px;
            font-size: 20px;
            font-weight: 400;
            color: #ffffff;
            line-height: 28px;
            opacity: 0.8;
          }

          &-img {
            &-type {
              position: absolute;
              width: 70px;
              height: 48px;
              background-image: url("../../../assets/images/list-cell-img-type-bg.png");
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;

              &-content {
                margin: 3px 0 0 8px;
                transform: rotate(-35deg);
                -ms-transform: rotate(-35deg); /* IE 9 */
                -moz-transform: rotate(-35deg); /* Firefox */
                -webkit-transform: rotate(-35deg); /* Safari 和 Chrome */
                -o-transform: rotate(-35deg); /* Opera */
                width: 40px;
                height: 35px;
                font-size: 16px;
                font-weight: 400;
                color: #ffffff;
                line-height: 22px;
              }
            }

            img {
              width: 203px;
              height: 239px;
              border: 1px solid #dcdfe6;
            }

            .list-cell-shield {
              display: none;
              position: absolute;
              margin-top: -243px;
              width: 203px;
              height: 239px;
              background-image: none;
              background-color: rgba(0, 0, 0, 0.3);

              &-content {
                padding: 20px 30px;
                width: 100%;

                .shield-content-label {
                  width: 100%;
                  font-weight: 400;
                  font-size: 20px;
                  color: #ffffff;
                }

                .shield-content-datetime {
                  margin: 15px 0 15px;
                  width: 100%;
                  font-weight: 400;
                  font-size: 18px;
                  color: #ffffff;
                }

                .shield-content-edit {
                  margin: 10px 0 0;
                }

                .shield-content-relation {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-top: 15px;
                  width: 100%;
                  font-weight: 400;
                  font-size: 14px;
                  color: #ffffff;
                  cursor: pointer;
                }
              }
            }

            &:hover .list-cell-shield {
              display: block;
            }
          }
        }
      }

      &-nodata {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 386px;
        border: 1px solid #b5b5b5;
        border-radius: 5px;
        color: #747474;
        opacity: 0.8;
      }
    }
  }

  &-addpage {
    &-head {
      margin-bottom: 20px;
      width: 100%;
      padding: 15px 20px;
      background: url("../../../assets/images/home-head-img.png"), #ffffff;
      background-size: 67px 67px, cover;
      background-position: right 5px bottom 0px, center;
      background-repeat: no-repeat, no-repeat;
      border-radius: 10px;

      &-title {
        display: flex;
        align-items: center;

        div {
          &:first-child {
            height: 37px;
            line-height: 37px;
          }

          &:last-child {
            margin-left: 15px;
            height: 37px;
            font-size: 26px;
            font-weight: 400;
            color: #4f4f4f;
            line-height: 37px;
            letter-spacing: 1px;
          }

          img {
            width: 34px;
            height: 34px;
          }
        }
      }
    }
  }
}
</style>