init

src/assets/css/element.scss

@@ -11,6 +11,7 @@
   --el-fill-color-blank: #081435 !important; // 背景色
   --el-border-color-lighter: var(--el-border-color) !important;
   --el-bullet-frame-bg-color: #08163b !important;
+  --el-text-color-primary: #fff !important;
 }
 
 .el-button:focus, .el-button:hover {

src/assets/js/asyncRouter.js

@@ -112,6 +112,74 @@ export default [
       },
     ],
   },
+  {
+    path: "/troubleshooting_statistics",
+    redirect: "/troubleshooting_statistics/day_inspection",
+    meta: { title: "排查统计", model: MODEL["1"] },
+    component: "children",
+    children: [
+      {
+        path: "/troubleshooting_statistics/day_inspection",
+        meta: { title: "清单检查记录（日检）", isSubMenu: false },
+        component: "children",
+        children: [
+          {
+            path: "",
+            component: "troubleshooting_statistics/day_inspection/index",
+          },
+          {
+            path: "/troubleshooting_statistics/day_inspection/inspection_records",
+            meta: {
+              title: "检查记录",
+              activeMenu: "/troubleshooting_statistics/day_inspection",
+            },
+            component:
+              "troubleshooting_statistics/day_inspection/inspection_records",
+          },
+        ],
+      },
+      {
+        path: "/troubleshooting_statistics/week_inspection",
+        meta: { title: "清单检查记录（周检）", isSubMenu: false },
+        component: "children",
+        children: [
+          {
+            path: "",
+            component: "troubleshooting_statistics/week_inspection/index",
+          },
+          {
+            path: "/troubleshooting_statistics/week_inspection/inspection_records",
+            meta: {
+              title: "检查记录",
+              activeMenu: "/troubleshooting_statistics/week_inspection",
+            },
+            component:
+              "troubleshooting_statistics/week_inspection/inspection_records",
+          },
+        ],
+      },
+      {
+        path: "/troubleshooting_statistics/ten_day_inspection",
+        meta: { title: "清单检查记录（旬检）", isSubMenu: false },
+        component: "children",
+        children: [
+          {
+            path: "",
+            component: "troubleshooting_statistics/ten_day_inspection/index",
+          },
+          {
+            path: "/troubleshooting_statistics/ten_day_inspection/inspection_records",
+            meta: {
+              title: "检查记录",
+              activeMenu: "/troubleshooting_statistics/ten_day_inspection",
+            },
+            component:
+              "troubleshooting_statistics/ten_day_inspection/inspection_records",
+          },
+        ],
+      },
+    ],
+  },
   {
     path: "/system_operation",
     redirect: "/system_operation/system_documents",
@@ -670,11 +738,21 @@ export default [
     meta: { title: "离岗管理", model: MODEL["1"] },
     component: "children",
     children: [
+      {
+        path: "/off_duty_management/setting",
+        meta: { title: "离岗设置", isSubMenu: false },
+        component: "off_duty_management/setting/index",
+      },
       {
         path: "/off_duty_management/leave",
         meta: { title: "离岗管理", isSubMenu: false },
         component: "off_duty_management/leave/index",
       },
+      {
+        path: "/off_duty_management/record",
+        meta: { title: "离岗记录", isSubMenu: false },
+        component: "off_duty_management/record/index",
+      },
       {
         path: "/off_duty_management/login_record",
         meta: { title: "登录记录", isSubMenu: false },
@@ -1618,4 +1696,82 @@ export default [
       },
     ],
   },
+  {
+    path: "/security_commitment_pro",
+    redirect: "/security_commitment_pro/template",
+    meta: { title: "安全承诺Pro", model: MODEL["4"] },
+    component: "children",
+    children: [
+      {
+        path: "/security_commitment_pro/template",
+        meta: { title: "安全承诺书模板", isSubMenu: false },
+        component: "children",
+        children: [
+          {
+            path: "",
+            component: "security_commitment_pro/template/index",
+          },
+          {
+            path: "/security_commitment_pro/template/add",
+            meta: {
+              title: "新增",
+              activeMenu: "/security_commitment_pro/template",
+            },
+            component: "security_commitment_pro/template/add",
+          },
+          {
+            path: "/security_commitment_pro/template/edit",
+            meta: {
+              title: "编辑",
+              activeMenu: "/security_commitment_pro/template",
+            },
+            component: "security_commitment_pro/template/add",
+          },
+        ],
+      },
+      {
+        path: "/security_commitment_pro/administration",
+        meta: { title: "安全承诺书管理", isSubMenu: false },
+        component: "children",
+        children: [
+          {
+            path: "",
+            component: "security_commitment_pro/administration/index",
+          },
+          {
+            path: "/security_commitment_pro/administration/add",
+            meta: {
+              title: "新增",
+              activeMenu: "/security_commitment_pro/administration",
+            },
+            component: "security_commitment_pro/administration/add",
+          },
+          {
+            path: "/security_commitment_pro/administration/edit",
+            meta: {
+              title: "编辑",
+              activeMenu: "/security_commitment_pro/administration",
+            },
+            component: "security_commitment_pro/administration/add",
+          },
+          {
+            path: "/security_commitment_pro/administration/view",
+            meta: {
+              title: "查看",
+              activeMenu: "/security_commitment_pro/administration",
+            },
+            component: "security_commitment_pro/administration/view",
+          },
+          {
+            path: "/security_commitment_pro/administration/details",
+            meta: {
+              title: "详情",
+              activeMenu: "/security_commitment_pro/administration",
+            },
+            component: "security_commitment_pro/administration/details",
+          },
+        ],
+      },
+    ],
+  },
 ];

src/assets/js/data_dictionary.js

@@ -97,13 +97,6 @@ export const layoutFnGetRiskCauses = async () => {
   });
   return ref(resData.list);
 };
-// 部门级别
-export const layoutFnGetDepartmentLevel = async () => {
-  const resData = await getLevels({
-    DICTIONARIES_ID: "4a661fa8aedc4d158c9cddaa9d2ec47e",
-  });
-  return ref(resData.list);
-};
 // 民族
 export const layoutFnGetNation = async () => {
   const resData = await getLevels({
@@ -237,6 +230,13 @@ export const layoutFnGetRiskClassification = async () => {
   });
   return ref(resData.list);
 };
+// 承诺书级别
+export const layoutFnGetCommitmentLevel = async () => {
+  const resData = await getLevels({
+    DICTIONARIES_ID: "8c5064693fba4dbca1cbfea631cd097a",
+  });
+  return ref(resData.list);
+};
 // 部门树
 export const layoutFnGetDepartmentTree = async (params) => {
   const resData = await getDepartmentTree(params);

src/assets/js/utils.js

@@ -288,12 +288,17 @@ export function addingPrefixToFile(list) {
  * @param {string} key 验证的字段
  * @param {string} id 验证的值
  **/
-export function verifyDuplicateSelection(list, index, key, id) {
+export async function verifyDuplicateSelection(list, index, key, id) {
+  return new Promise((resolve, reject) => {
     if (list.some((item) => item[key] === id)) {
       ElMessage.warning("不能重复选择");
+      // eslint-disable-next-line prefer-promise-reject-errors
+      reject();
     } else {
       list[index][key] = id;
+      resolve();
     }
+  });
 }
 
 /**

src/request/off_duty_management.js

@@ -7,4 +7,8 @@ export const getApprovedByList = (params) =>
   post("/app/sys/listUserLeader", params); // 离岗管理获取审批人
 export const setLeaveReview = (params) => post("/offduty/review", params); // 离岗管理审批
 export const setLeaveCancel = (params) => post("/offduty/cancel", params); // 离岗管理取消
+export const getSettingList = (params) => post("/offdutySetup/list", params); // 离岗设置列表
+export const setSettingChange = (params) =>
+  post("/offdutySetup/editSetup", params); // 离岗设置切换
+export const getRecordList = (params) => post("/offduty/list", params); // 离岗记录列表
 export const getLoginRecordList = (params) => post("/fhlog/getList", params); // 登录记录列表

src/request/security_commitment_pro.js

@@ -0,0 +1,27 @@
+import { post } from "@/request/axios.js";
+
+export const getTemplateList = (params) => post("/promise/list", params); // 安全承诺书模板列表
+export const getTemplateView = (params) => post("/promise/goEdit", params); // 安全承诺书模板查看
+export const setTemplateEnableOrDisable = (params) =>
+  post("/promise/editdelete", params); // 安全承诺书模板启用禁用
+export const setTemplateDelete = (params) => post("/promise/delete", params); // 安全承诺书模板删除
+export const setTemplateEdit = (params) => post("/promise/edit", params); // 安全承诺书模板修改
+export const setTemplateAdd = (params) => post("/promise/add", params); // 安全承诺书模板新增
+export const getAdministrationList = (params) =>
+  post("/corppromise/list", params); // 安全承诺书模板列表
+export const getAdministrationView = (params) =>
+  post("/corppromise/goEdit", params); // 安全承诺书模板查看
+export const setAdministrationEnableOrDisable = (params) =>
+  post("/corppromise/editdelete", params); // 安全承诺书管理启用禁用
+export const setAdministrationEdit = (params) =>
+  post("/corppromise/edit_II", params); // 安全承诺书管理修改
+export const setAdministrationAdd = (params) =>
+  post("/corppromise/add_II", params); // 安全承诺书管理新增
+export const getAdministrationDetailsList = (params) =>
+  post("/corppromise/peopledetails", params); // 安全承诺书模板详情列表
+export const getAdministrationDetailsView = (params) =>
+  post("/corppromise/peopleview", params); // 安全承诺书模板详情查看
+export const getAdministrationSelectTemplateList = (params) =>
+  post("/corppromise/showtemplatetext", params); // 安全承诺书选择模板列表
+export const getAdministrationSelectTemplateCheck = (params) =>
+  post("/corppromise/collateral", params); // 安全承诺书选择模板选择

src/request/troubleshooting_statistics.js

@@ -0,0 +1,10 @@
+import { post } from "@/request/axios.js";
+
+export const getChecklistInspectionRecordList = (params) =>
+  post("/listmanager/recordList", params); // 清单检查记录列表
+export const getChecklistInspectionRecordDayInspectionList = (params) =>
+  post("/listmanager/statisticsListCheckDay", params); // 清单检查记录日检列表
+export const getChecklistInspectionRecordWeekInspectionList = (params) =>
+  post("/listmanager/statisticsListCheckWeek", params); // 清单检查记录周检列表
+export const getChecklistInspectionRecordTenDayInspectionList = (params) =>
+  post("/listmanager/statisticsListCheckTenday", params); // 清单检查记录旬检列表

src/views/enterprise_management/department/components/add.vue

@@ -14,7 +14,7 @@
       <el-form-item label="部门级别" prop="LEVEL">
         <el-select v-model="form.LEVEL">
           <el-option
-            v-for="item in departmentLevel"
+            v-for="item in inventoryLevel"
             :key="item.BIANMA"
             :label="item.NAME"
             :value="item.BIANMA"
@@ -84,7 +84,7 @@ import { useVModels } from "@vueuse/core";
 import { ref } from "vue";
 import { debounce } from "throttle-debounce";
 import useFormValidate from "@/assets/js/useFormValidate.js";
-import { layoutFnGetDepartmentLevel } from "@/assets/js/data_dictionary.js";
+import { layoutFnGetInventoryLevel } from "@/assets/js/data_dictionary.js";
 import LayoutDepartment from "@/components/department/index.vue";
 import { useUserStore } from "@/pinia/user.js";
 import {
@@ -137,7 +137,7 @@ const rules = {
 };
 const userStore = useUserStore();
 const formRef = ref(null);
-const departmentLevel = await layoutFnGetDepartmentLevel();
+const inventoryLevel = await layoutFnGetInventoryLevel();
 const fnChangeRegulatoryAuthorities = (event) => {
   if (event === "1" && form.value.checkedIds.length === 0) {
     if (props.type === "add")

src/views/off_duty_management/record/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="90px"
+        @submit.prevent="fnResetPaginationTransfer"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="申请人" prop="KEYWORDS">
+              <el-input v-model="searchForm.KEYWORDS" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="离岗状态" prop="REVIEW_STATUS">
+              <el-select v-model="searchForm.REVIEW_STATUS">
+                <el-option
+                  v-for="item in reviewStatusList"
+                  :key="item.ID"
+                  :value="item.ID"
+                  :label="item.NAME"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="审批人" prop="REVIEW_USER_NAME">
+              <el-input v-model="searchForm.REVIEW_USER_NAME" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="离岗时间" prop="dates">
+              <el-date-picker
+                v-model="searchForm.dates"
+                type="daterange"
+                value-format="YYYY-MM-DD"
+                format="YYYY-MM-DD"
+                range-separator="至"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="申请人部门">
+              <layout-department
+                v-model="searchForm.DEPTIDS"
+                multiple
+                show-checkbox
+                collapse-tags
+                root-disabled="Y"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="10px">
+              <el-button type="primary" native-type="submit">搜索</el-button>
+              <el-button native-type="reset" @click="fnResetPaginationTransfer">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <layout-card>
+      <layout-table
+        :data="list"
+        @get-data="fnGetDataTransfer"
+        v-model:pagination="pagination"
+      >
+        <el-table-column label="序号" width="60">
+          <template #default="{ $index }">
+            {{ serialNumber(pagination, $index) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="DEPARTMENTNAME_ALL" label="部门" />
+        <el-table-column prop="POSTNAME" label="岗位" />
+        <el-table-column prop="USER_NAME" label="姓名" />
+        <el-table-column label="申请状态">
+          <template v-slot="{ row }">
+            <span v-if="row.REVIEW_STATUS === '0'">待审批</span>
+            <span v-else-if="row.REVIEW_STATUS === '1'">审批通过</span>
+            <span
+              v-else-if="row.ISDELETE === '1' && row.REVIEW_STATUS === '-1'"
+            >
+              <span v-if="row.CREATOR === row.OPERATOR">申请人取消</span>
+              <span v-else>审批人取消</span>
+            </span>
+            <span v-else-if="row.REVIEW_STATUS === '-1'">审批打回</span>
+            <span v-else-if="row.REVIEW_STATUS === '2'">无需审批</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="离岗时间">
+          <template v-slot="{ row }">
+            <span>{{ row.STARTTIME }} 至 {{ row.ENDTIME }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="指定审批人">
+          <template v-slot="{ row }">
+            <span v-if="row.REVIEW_USER_ID">
+              {{
+                row.REVIEW_USER_NAME +
+                " [" +
+                row.REVIEW_USER_DEPARTMENTNAME +
+                "]"
+              }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template v-slot="{ row }">
+            <el-button type="primary" text link @click="fnView(row)">
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </layout-table>
+    </layout-card>
+  </div>
+</template>
+
+<script setup>
+import { serialNumber } from "@/assets/js/utils";
+import useListData from "@/assets/js/useListData.js";
+import { getRecordList } from "@/request/off_duty_management.js";
+import LayoutDepartment from "@/components/department/index.vue";
+
+const reviewStatusList = [
+  { ID: "0", NAME: "待审批" },
+  { ID: "1", NAME: "审批通过" },
+  { ID: "-1", NAME: "审批打回" },
+  { ID: "2", NAME: "无需审批" },
+  { ID: "3", NAME: "申请人取消" },
+  { ID: "4", NAME: "审批人取消" },
+];
+const { list, pagination, searchForm, fnGetData, fnResetPagination } =
+  useListData(getRecordList, { otherParams: { TYPE: "show" } });
+const fnGetDataTransfer = () => {
+  fnGetData({
+    STARTTIME: searchForm.value.dates?.[0],
+    ENDTIME: searchForm.value.dates?.[1],
+    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
+  });
+};
+const fnResetPaginationTransfer = () => {
+  fnResetPagination({
+    STARTTIME: searchForm.value.dates?.[0],
+    ENDTIME: searchForm.value.dates?.[1],
+    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
+  });
+};
+</script>
+
+<style scoped></style>

src/views/off_duty_management/setting/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <layout-card>
+    <layout-table :data="list" :show-pagination="false">
+      <el-table-column label="序号" width="60" type="index" />
+      <el-table-column prop="CORP_NAME" label="企业名称" />
+      <el-table-column label="离岗是否审批" width="260">
+        <template #default="{ row }">
+          <el-switch
+            v-model="SETUP_STATE"
+            active-text="是"
+            inactive-text="否"
+            active-value="2"
+            inactive-value="1"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            @change="fnChange(row)"
+          />
+        </template>
+      </el-table-column>
+    </layout-table>
+  </layout-card>
+</template>
+
+<script setup>
+import useListData from "@/assets/js/useListData.js";
+import {
+  getSettingList,
+  setSettingChange,
+} from "@/request/off_duty_management.js";
+import { ref } from "vue";
+import { debounce } from "throttle-debounce";
+import { ElMessage } from "element-plus";
+
+const SETUP_STATE = ref("");
+const { list, fnResetPagination } = useListData(getSettingList, {
+  usePagination: false,
+  callbackFn: (list) => {
+    if (list.length > 0) SETUP_STATE.value = list[0].SETUP_STATE;
+  },
+});
+const fnChange = debounce(
+  1000,
+  async (row) => {
+    await setSettingChange({
+      OFFDUTY_SETUP_ID: row.OFFDUTY_SETUP_ID,
+      CORPINFO_ID: row.CORPINFO_ID,
+      SETUP_STATE: SETUP_STATE.value,
+    });
+    ElMessage.success("设置成功");
+    fnResetPagination();
+  },
+  { atBegin: true }
+);
+</script>
+
+<style scoped></style>

src/views/security_commitment_pro/administration/add.vue

@@ -0,0 +1,518 @@
+<template>
+  <layout-card>
+    <el-form
+      ref="formRef"
+      :rules="rules"
+      :model="data.form"
+      label-width="120px"
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="承诺书名称" prop="PROMISE_NAME">
+            <el-input v-model="data.form.PROMISE_NAME" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="级别" prop="LEVEL">
+            <el-select v-model="data.form.LEVEL">
+              <el-option
+                v-for="item in commitmentLevelList"
+                :key="item.DICTIONARIES_ID"
+                :value="item.BIANMA"
+                :label="item.NAME"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="适用期限开始" prop="PROMISE_TERM_START">
+            <el-date-picker
+              v-model="data.form.PROMISE_TERM_START"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="适用期限结束" prop="PROMISE_TERM_END">
+            <el-date-picker
+              v-model="data.form.PROMISE_TERM_END"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-divider content-position="left">承诺人</el-divider>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="end">
+            <el-button type="primary" @click="fnAddPeople">添加</el-button>
+          </el-form-item>
+        </el-col>
+        <template v-for="(item, index) in data.form.people" :key="item.id">
+          <el-col :span="8">
+            <el-form-item
+              :label="'部门' + (index + 1)"
+              :prop="'people.' + index + '.DEPARTMENT_ID'"
+              :rules="{
+                required: true,
+                message: '部门不能为空',
+                trigger: 'blur',
+              }"
+            >
+              <layout-department
+                v-model="item.DEPARTMENT_ID"
+                @update:model-value="
+                  fnDepartmentChange($event, index, 'people')
+                "
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :label="'岗位' + (index + 1)"
+              :prop="'people.' + index + '.POST_ID'"
+              :rules="{
+                required: true,
+                message: '岗位不能为空',
+                trigger: 'blur',
+              }"
+            >
+              <el-select
+                :model-value="item.POST_ID"
+                @change="fnPostChange($event, index, 'people')"
+              >
+                <el-option
+                  v-for="item in item.postList"
+                  :key="item.POST_ID"
+                  :label="item.NAME"
+                  :value="item.POST_ID"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :label="'人员' + (index + 1)"
+              :prop="'people.' + index + '.USER_ID'"
+              :rules="{
+                required: true,
+                message: '人员不能为空',
+                trigger: 'blur',
+              }"
+            >
+              <div
+                style="
+                  flex: 1;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: flex-start;
+                "
+              >
+                <el-select v-model="item.USER_ID" multiple>
+                  <el-option
+                    v-for="item in item.userList"
+                    :key="item.USER_ID"
+                    :label="item.NAME"
+                    :value="item.USER_ID"
+                  />
+                </el-select>
+                <el-button
+                  v-if="index !== 0"
+                  class="ml-10"
+                  type="danger"
+                  @click="data.form.people.splice(index, 1)"
+                >
+                  删除
+                </el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+        </template>
+        <el-col :span="24">
+          <el-divider content-position="left">被承诺人</el-divider>
+        </el-col>
+        <!--        <el-col :span="24">-->
+        <!--          <el-form-item class="end">-->
+        <!--            <el-button type="primary" @click="fnAddCoverPeople">添加</el-button>-->
+        <!--          </el-form-item>-->
+        <!--        </el-col>-->
+        <template v-for="(item, index) in data.form.coverpeople" :key="item.id">
+          <el-col :span="8">
+            <el-form-item
+              :label="'部门' + (index + 1)"
+              :prop="'coverpeople.' + index + '.DEPARTMENT_ID'"
+              :rules="{
+                required: true,
+                message: '部门不能为空',
+                trigger: 'blur',
+              }"
+            >
+              <layout-department
+                v-model="item.DEPARTMENT_ID"
+                @update:model-value="
+                  fnDepartmentChange($event, index, 'coverpeople')
+                "
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :label="'岗位' + (index + 1)"
+              :prop="'coverpeople.' + index + '.POST_ID'"
+              :rules="{
+                required: true,
+                message: '岗位不能为空',
+                trigger: 'blur',
+              }"
+            >
+              <el-select
+                :model-value="item.POST_ID"
+                @change="fnPostChange($event, index, 'coverpeople')"
+              >
+                <el-option
+                  v-for="item in item.postList"
+                  :key="item.POST_ID"
+                  :label="item.NAME"
+                  :value="item.POST_ID"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :label="'人员' + (index + 1)"
+              :prop="'coverpeople.' + index + '.USER_ID'"
+              :rules="{
+                required: true,
+                message: '人员不能为空',
+                trigger: 'blur',
+              }"
+            >
+              <div
+                style="
+                  flex: 1;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: flex-start;
+                "
+              >
+                <el-select v-model="item.USER_ID" multiple :multiple-limit="1">
+                  <el-option
+                    v-for="item in item.userList"
+                    :key="item.USER_ID"
+                    :label="item.NAME"
+                    :value="item.USER_ID"
+                  />
+                </el-select>
+                <!--                <el-button-->
+                <!--                  v-if="index !== 0"-->
+                <!--                  class="ml-10"-->
+                <!--                  type="danger"-->
+                <!--                  @click="data.form.coverpeople.splice(index, 1)"-->
+                <!--                >-->
+                <!--                  删除-->
+                <!--                </el-button>-->
+              </div>
+            </el-form-item>
+          </el-col>
+        </template>
+        <el-col :span="24">
+          <el-divider content-position="left">承诺书内容</el-divider>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="end">
+            <el-button type="primary" @click="fnSelectTemplate">
+              选择模板
+            </el-button>
+          </el-form-item>
+        </el-col>
+        <template v-if="data.isSelectTemplate">
+          <el-col :span="24">
+            <el-form-item label="正文" prop="TEXT">
+              <el-input
+                v-model="data.form.TEXT"
+                type="textarea"
+                :autosize="{ minRows: 3 }"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item class="end">
+              <el-button type="primary" @click="fnAddCollateral">
+                新增副文
+              </el-button>
+            </el-form-item>
+          </el-col>
+          <el-col
+            v-for="(item, index) in data.form.DETAIL"
+            :key="item.id"
+            :span="24"
+          >
+            <el-form-item
+              :label="'副文' + (index + 1)"
+              :prop="'DETAIL.' + index + '.value'"
+              :rules="{
+                required: true,
+                message: '副文不能为空',
+                trigger: 'blur',
+              }"
+            >
+              <div
+                style="
+                  flex: 1;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: flex-start;
+                "
+              >
+                <el-input
+                  v-model="item.value"
+                  type="textarea"
+                  :autosize="{ minRows: 3 }"
+                />
+                <el-button
+                  v-if="index !== 0"
+                  class="ml-10"
+                  type="danger"
+                  @click="data.form.DETAIL.splice(index, 1)"
+                >
+                  删除
+                </el-button>
+              </div>
+            </el-form-item>
+          </el-col>
+        </template>
+      </el-row>
+    </el-form>
+    <div class="mt-10 tc">
+      <el-button type="primary" @click="fnSubmit">提交</el-button>
+    </div>
+    <select-template
+      v-model:visible="data.selectTemplateDialogVisible"
+      @check="fnSelectTemplateSubmit"
+    />
+  </layout-card>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import { layoutFnGetCommitmentLevel } from "@/assets/js/data_dictionary.js";
+import LayoutDepartment from "@/components/department/index.vue";
+import { getPostListAll, getUserListAll } from "@/request/data_dictionary.js";
+import { verifyDuplicateSelection } from "@/assets/js/utils.js";
+import SelectTemplate from "./components/select_template.vue";
+import { debounce } from "throttle-debounce";
+import { useRoute, useRouter } from "vue-router";
+import useFormValidate from "@/assets/js/useFormValidate.js";
+import { ElMessage } from "element-plus";
+import {
+  getAdministrationView,
+  setAdministrationAdd,
+  setAdministrationEdit,
+} from "@/request/security_commitment_pro.js";
+import dayjs from "dayjs";
+import { uniqBy } from "lodash-es";
+
+const route = useRoute();
+const router = useRouter();
+const { PROMISE_ID } = route.query;
+const rules = {
+  PROMISE_NAME: [
+    { required: true, message: "承诺书名称不能为空", trigger: "blur" },
+  ],
+  LEVEL: [{ required: true, message: "级别不能为空", trigger: "change" }],
+  PROMISE_TERM_START: [
+    { required: true, message: "适用期限开始不能为空", trigger: "change" },
+  ],
+  PROMISE_TERM_END: [
+    { required: true, message: "适用期限结束不能为空", trigger: "change" },
+  ],
+  TEXT: [{ required: true, message: "正文不能为空", trigger: "blur" }],
+};
+const formRef = ref(null);
+const data = reactive({
+  form: {
+    PROMISE_NAME: "",
+    LEVEL: "",
+    PROMISE_TERM_START: dayjs().format("YYYY-MM-DD"),
+    PROMISE_TERM_END: dayjs().format("YYYY-MM-DD"),
+    people: [],
+    coverpeople: [],
+    TEXT: "",
+    DETAIL: [],
+  },
+  selectTemplateDialogVisible: false,
+  isSelectTemplate: false,
+});
+const commitmentLevelList = await layoutFnGetCommitmentLevel();
+const fnAddPeople = () => {
+  data.form.people.push({
+    postList: [],
+    userList: [],
+    DEPARTMENT_ID: "",
+    POST_ID: "",
+    USER_ID: [],
+    id: Math.random(),
+  });
+};
+const fnAddCoverPeople = () => {
+  data.form.coverpeople.push({
+    postList: [],
+    userList: [],
+    DEPARTMENT_ID: "",
+    POST_ID: "",
+    USER_ID: [],
+    id: Math.random(),
+  });
+};
+const fnGetData = async () => {
+  if (!PROMISE_ID) {
+    fnAddPeople();
+    fnAddCoverPeople();
+    return;
+  }
+  const resData = await getAdministrationView({ PROMISE_ID });
+  const DETAIL = resData.promistDetail.map((item) => ({
+    value: item.COLLATERAL,
+    id: item.PROMISEDETAIL_ID,
+  }));
+  const people = resData.people;
+  const coverpeople = resData.coverpeople;
+  const newPeople = [];
+  const newCoverpeople = [];
+  for (let i = 0; i < people.length; i++) {
+    newPeople.push({
+      ...people[i],
+      postList: [],
+      userList: [],
+      USER_ID: [],
+      id: people[i].PROMISEPEOPLE_ID,
+    });
+    for (let j = 0; j < newPeople.length; j++) {
+      if (people[i].POST_ID === newPeople[j].POST_ID) {
+        newPeople[j].USER_ID.push(people[i].USER_ID);
+      }
+    }
+  }
+  for (let i = 0; i < coverpeople.length; i++) {
+    newCoverpeople.push({
+      ...coverpeople[i],
+      postList: [],
+      userList: [],
+      USER_ID: [],
+      id: coverpeople[i].PROMISEPEOPLE_ID,
+    });
+    for (let j = 0; j < newCoverpeople.length; j++) {
+      if (coverpeople[i].POST_ID === newCoverpeople[j].POST_ID) {
+        newCoverpeople[j].USER_ID.push(coverpeople[i].USER_ID);
+      }
+    }
+  }
+  data.form = {
+    ...resData.varList,
+    DETAIL,
+    people: uniqBy(newPeople, "POST_ID"),
+    coverpeople: uniqBy(newCoverpeople, "POST_ID"),
+  };
+  data.isSelectTemplate = true;
+  for (let i = 0; i < data.form.people.length; i++) {
+    await fnGetPostList(data.form.people[i].DEPARTMENT_ID, i, "people");
+    await fnGetUserList(
+      data.form.people[i].DEPARTMENT_ID,
+      data.form.people[i].POST_ID,
+      i,
+      "people"
+    );
+  }
+  for (let i = 0; i < data.form.coverpeople.length; i++) {
+    await fnGetPostList(
+      data.form.coverpeople[i].DEPARTMENT_ID,
+      i,
+      "coverpeople"
+    );
+    await fnGetUserList(
+      data.form.coverpeople[i].DEPARTMENT_ID,
+      data.form.coverpeople[i].POST_ID,
+      i,
+      "coverpeople"
+    );
+  }
+};
+fnGetData();
+const fnDepartmentChange = (value, index, key) => {
+  data.form[key][index].POST_ID = "";
+  data.form[key][index].USER_ID = [];
+  data.form[key][index].postList = [];
+  data.form[key][index].userList = [];
+  fnGetPostList(value, index, key);
+};
+const fnGetPostList = async (DEPARTMENT_ID, index, key) => {
+  const resData = await getPostListAll({ DEPARTMENT_ID });
+  data.form[key][index].postList = resData.postList;
+};
+const fnPostChange = async (value, index, key) => {
+  await verifyDuplicateSelection(data.form[key], index, "POST_ID", value);
+  data.form[key][index].USER_ID = [];
+  data.form[key][index].userList = [];
+  await fnGetUserList(data.form[key][index].DEPARTMENT_ID, value, index, key);
+};
+const fnGetUserList = async (DEPARTMENT_ID, POST_ID, index, key) => {
+  const resData = await getUserListAll({ DEPARTMENT_ID, POST_ID });
+  data.form[key][index].userList = resData.userList;
+};
+const fnSelectTemplate = () => {
+  data.selectTemplateDialogVisible = true;
+};
+const fnSelectTemplateSubmit = (row) => {
+  data.form.DETAIL = row.DETAIL;
+  data.form.TEXT = row.TEXT;
+  data.form.TYPE = row.TYPE;
+  data.isSelectTemplate = true;
+};
+const fnAddCollateral = () => {
+  data.form.DETAIL.push({ value: "", id: Math.random() });
+};
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await useFormValidate(formRef);
+    if (!data.isSelectTemplate) {
+      ElMessage.warning("请选择模板");
+      return;
+    }
+    const DETAIL = data.form.DETAIL.map((item, index) => ({
+      value: item.value,
+      index,
+    }));
+    const people = data.form.people.map((item) => ({
+      DEPARTMENT_ID: item.DEPARTMENT_ID,
+      POST_ID: item.POST_ID,
+      USER_ID: item.USER_ID,
+    }));
+    const coverpeople = data.form.coverpeople.map((item) => ({
+      DEPARTMENT_ID: item.DEPARTMENT_ID,
+      POST_ID: item.POST_ID,
+      USER_ID: item.USER_ID,
+    }));
+    const params = {
+      ...data.form,
+      DETAIL: JSON.stringify(DETAIL),
+      people: JSON.stringify(people),
+      coverpeople: JSON.stringify(coverpeople),
+      PROMISE_ID,
+    };
+    !PROMISE_ID
+      ? await setAdministrationAdd(params)
+      : await setAdministrationEdit(params);
+    ElMessage.success("操作成功");
+    router.back();
+  },
+  { atBegin: true }
+);
+</script>
+
+<style scoped lang="scss"></style>

src/views/security_commitment_pro/administration/components/select_template.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-dialog v-model="visible" title="选择模板">
+    <el-form
+      :model="searchForm"
+      label-width="90px"
+      @submit.prevent="fnResetPagination"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="承诺书名称" prop="KEYWORDS">
+            <el-input v-model="searchForm.KEYWORDS" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label-width="10px">
+            <el-button type="primary" native-type="submit">搜索</el-button>
+            <el-button native-type="reset" @click="fnResetPagination">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <layout-table
+      :data="list"
+      @get-data="fnGetData"
+      v-model:pagination="pagination"
+    >
+      <el-table-column label="序号" width="60">
+        <template #default="{ $index }">
+          {{ serialNumber(pagination, $index) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="PROMISE_NAME" label="承诺书名称" />
+      <el-table-column label="类型">
+        <template v-slot="{ row }">
+          {{ row.TYPE === "0" ? "承诺书" : "责任状" }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200">
+        <template v-slot="{ row }">
+          <el-button type="primary" text link @click="fnCheck(row)">
+            选择
+          </el-button>
+        </template>
+      </el-table-column>
+    </layout-table>
+    <template #footer>
+      <el-button @click="fnClose">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useVModel } from "@vueuse/core";
+import useListData from "@/assets/js/useListData.js";
+import {
+  getAdministrationSelectTemplateCheck,
+  getAdministrationSelectTemplateList,
+} from "@/request/security_commitment_pro.js";
+import { serialNumber } from "@/assets/js/utils.js";
+import { watch } from "vue";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+});
+const emits = defineEmits(["update:visible", "check"]);
+const visible = useVModel(props, "visible", emits);
+const { list, pagination, searchForm, fnGetData, fnResetPagination } =
+  useListData(getAdministrationSelectTemplateList, {
+    immediate: false,
+  });
+const fnClose = () => {
+  visible.value = false;
+};
+const fnCheck = async (row) => {
+  const resData = await getAdministrationSelectTemplateCheck({
+    PROMISE_ID: row.PROMISE_ID,
+  });
+  const DETAIL = resData.varList.map((item) => ({
+    value: item.COLLATERAL,
+    id: item.PROMISEDETAIL_ID,
+  }));
+  fnClose();
+  emits("check", { DETAIL, TEXT: row.TEXT, TYPE: row.TYPE });
+};
+const stop = watch(visible, (val) => {
+  if (val) {
+    fnGetData();
+    stop && stop();
+  }
+});
+</script>
+
+<style scoped lang="scss"></style>

src/views/security_commitment_pro/administration/details.vue

@@ -0,0 +1,85 @@
+<template>
+  <layout-card>
+    <layout-table
+      :data="list"
+      @get-data="fnGetData"
+      v-model:pagination="pagination"
+    >
+      <el-table-column label="序号" width="60">
+        <template #default="{ $index }">
+          {{ serialNumber(pagination, $index) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="DEPTNAME" label="部门" />
+      <el-table-column prop="POST_NAME" label="岗位" />
+      <el-table-column prop="USERNAME" label="人员" />
+      <el-table-column prop="SIGNTIME" label="签署时间" />
+      <el-table-column label="状态">
+        <template v-slot="{ row }">
+          {{ row.ISSIGN === 0 ? "未签署" : "已签署" }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="100">
+        <template v-slot="{ row }">
+          <el-button
+            type="primary"
+            text
+            link
+            @click="fnView(row.PROMISEPEOPLE_ID)"
+          >
+            查看
+          </el-button>
+        </template>
+      </el-table-column>
+    </layout-table>
+    <view-info
+      v-model:visible="data.viewDialog.visible"
+      :info="data.viewDialog.info"
+    />
+  </layout-card>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import useListData from "@/assets/js/useListData.js";
+import {
+  getAdministrationDetailsList,
+  getAdministrationDetailsView,
+} from "@/request/security_commitment_pro.js";
+import { serialNumber } from "@/assets/js/utils.js";
+import { reactive } from "vue";
+import ViewInfo from "../template/components/view.vue";
+
+const route = useRoute();
+const { PROMISE_ID } = route.query;
+const { list, pagination, fnGetData } = useListData(
+  getAdministrationDetailsList,
+  { otherParams: { PROMISE_ID } }
+);
+const data = reactive({
+  viewDialog: {
+    visible: false,
+    info: {},
+  },
+});
+const fnView = async (PROMISEPEOPLE_ID) => {
+  const resData = await getAdministrationDetailsView({
+    PROMISEPEOPLE_ID,
+    PROMISE_ID,
+  });
+  const DETAIL = resData.COLLATERAL.map((item) => ({
+    value: item.COLLATERAL,
+    id: item.PROMISEDETAIL_ID,
+  }));
+  data.viewDialog.info = {
+    ...resData.varList,
+    DETAIL,
+    FILEPATH: resData.ISGN.FILEPATH,
+    SIGNTIME: resData.ISGN.SIGNTIME,
+    COVERPEOPLE: resData.COVERPEOPLE[0].USERNAME,
+  };
+  data.viewDialog.visible = true;
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/security_commitment_pro/administration/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="90px"
+        @submit.prevent="fnResetPaginationTransfer"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="承诺书名称" prop="KEYWORDS">
+              <el-input v-model="searchForm.KEYWORDS" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="级别" prop="LEVEL">
+              <el-select v-model="searchForm.LEVEL">
+                <el-option
+                  v-for="item in commitmentLevelList"
+                  :key="item.DICTIONARIES_ID"
+                  :value="item.BIANMA"
+                  :label="item.NAME"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="部门" prop="DEPTIDS">
+              <layout-department
+                v-model="searchForm.DEPTIDS"
+                multiple
+                show-checkbox
+                collapse-tags
+                root-disabled="Y"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="10px">
+              <el-button type="primary" native-type="submit">搜索</el-button>
+              <el-button native-type="reset" @click="fnResetPaginationTransfer">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <layout-card>
+      <layout-table
+        :data="list"
+        @get-data="fnGetDataTransfer"
+        v-model:pagination="pagination"
+      >
+        <el-table-column label="序号" width="60">
+          <template #default="{ $index }">
+            {{ serialNumber(pagination, $index) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="PROMISE_NAME" label="承诺书名称" />
+        <el-table-column prop="LEVELNAME" label="级别" />
+        <el-table-column prop="CREATTIME" label="添加时间" width="150" />
+        <el-table-column label="适用期限" width="180">
+          <template v-slot="{ row }">
+            {{ row.PROMISE_TERM_START + "至" + row.PROMISE_TERM_END }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="DEPTNAME" label="涉及部门" />
+        <el-table-column prop="POSTNAME" label="涉及岗位" />
+        <el-table-column label="承诺人数/涉及人数">
+          <template v-slot="{ row }">
+            {{ row.ISSIGN }}/{{ row.PEOPLENUM_INVOLVED }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="80">
+          <template v-slot="{ row }">
+            {{ row.STATE === "0" ? "启用" : "禁用" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template v-slot="{ row }">
+            <el-button
+              type="primary"
+              text
+              link
+              @click="
+                router.push({
+                  path: '/security_commitment_pro/administration/view',
+                  query: { PROMISE_ID: row.PROMISE_ID },
+                })
+              "
+            >
+              查看
+            </el-button>
+            <el-button
+              type="primary"
+              text
+              link
+              @click="
+                fnEnableOrDisable(row.STATE === '0' ? 1 : 0, row.PROMISE_ID)
+              "
+            >
+              {{ row.STATE === "0" ? "禁用" : "启用" }}
+            </el-button>
+            <el-button
+              :disabled="row.ISSIGN !== 0"
+              type="primary"
+              text
+              link
+              @click="
+                router.push({
+                  path: '/security_commitment_pro/administration/edit',
+                  query: { PROMISE_ID: row.PROMISE_ID },
+                })
+              "
+            >
+              编辑
+            </el-button>
+            <el-button
+              type="primary"
+              text
+              link
+              @click="
+                router.push({
+                  path: '/security_commitment_pro/administration/details',
+                  query: { PROMISE_ID: row.PROMISE_ID },
+                })
+              "
+            >
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+        <template #button>
+          <el-button
+            type="primary"
+            @click="
+              router.push({
+                path: '/security_commitment_pro/administration/add',
+              })
+            "
+          >
+            新增
+          </el-button>
+        </template>
+      </layout-table>
+    </layout-card>
+  </div>
+</template>
+
+<script setup>
+import { serialNumber } from "@/assets/js/utils";
+import useListData from "@/assets/js/useListData.js";
+import {
+  getAdministrationList,
+  setAdministrationEnableOrDisable,
+} from "@/request/security_commitment_pro.js";
+import { debounce } from "throttle-debounce";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useRouter } from "vue-router";
+import { layoutFnGetCommitmentLevel } from "@/assets/js/data_dictionary.js";
+import LayoutDepartment from "@/components/department/index.vue";
+
+const router = useRouter();
+const { list, pagination, searchForm, fnGetData, fnResetPagination } =
+  useListData(getAdministrationList);
+const fnGetDataTransfer = () => {
+  fnGetData({
+    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
+  });
+};
+const fnResetPaginationTransfer = () => {
+  fnResetPagination({
+    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
+  });
+};
+const commitmentLevelList = await layoutFnGetCommitmentLevel();
+const fnEnableOrDisable = debounce(
+  1000,
+  async (STATE, PROMISE_ID) => {
+    const message = STATE === 0 ? "启用" : "禁用";
+    await ElMessageBox.confirm(`确定要${message}当前承诺书吗？`, {
+      type: "warning",
+    });
+    await setAdministrationEnableOrDisable({ PROMISE_ID, STATE });
+    ElMessage.success(`${message}成功`);
+    fnResetPaginationTransfer();
+  },
+  { atBegin: true }
+);
+</script>
+
+<style scoped></style>

src/views/security_commitment_pro/administration/view.vue

@@ -0,0 +1,136 @@
+<template>
+  <layout-card>
+    <el-divider content-position="left">基本信息</el-divider>
+    <el-descriptions :column="2" border>
+      <el-descriptions-item label="承诺书名称">
+        {{ info.PROMISE_NAME }}
+      </el-descriptions-item>
+      <el-descriptions-item label="级别">
+        {{ info.LEVELNAME }}
+      </el-descriptions-item>
+      <el-descriptions-item label="适用期限开始">
+        {{ info.PROMISE_TERM_START }}
+      </el-descriptions-item>
+      <el-descriptions-item label="适用期限结束">
+        {{ info.PROMISE_TERM_END }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-divider content-position="left">承诺人</el-divider>
+    <el-descriptions :column="3" border>
+      <template v-for="(item, index) in info.people" :key="item.id">
+        <el-descriptions-item :label="'部门' + (index + 1)">
+          {{ item.DEPTNAME }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="'岗位' + (index + 1)">
+          {{ item.POSTNAME }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="'人员' + (index + 1)">
+          {{ item.USERNAME?.join("、") }}
+        </el-descriptions-item>
+      </template>
+    </el-descriptions>
+    <el-divider content-position="left">被承诺人</el-divider>
+    <el-descriptions :column="3" border>
+      <template v-for="(item, index) in info.coverpeople" :key="item.id">
+        <el-descriptions-item :label="'部门' + (index + 1)">
+          {{ item.DEPTNAME }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="'岗位' + (index + 1)">
+          {{ item.POSTNAME }}
+        </el-descriptions-item>
+        <el-descriptions-item :label="'人员' + (index + 1)">
+          {{ item.USERNAME?.join("、") }}
+        </el-descriptions-item>
+      </template>
+    </el-descriptions>
+    <el-divider content-position="left">承诺内容</el-divider>
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="正文">
+        {{ info.TEXT }}
+      </el-descriptions-item>
+      <template v-for="(item, index) in info.DETAIL" :key="item.id">
+        <el-descriptions-item :label="'副文' + (index + 1)">
+          {{ item.value }}
+        </el-descriptions-item>
+      </template>
+    </el-descriptions>
+    <div class="tc mt-10">
+      <el-button type="primary" @click="fnView">模 板</el-button>
+    </div>
+    <view-info
+      v-model:visible="data.viewDialog.visible"
+      :info="data.viewDialog.info"
+    />
+  </layout-card>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import { getAdministrationView } from "@/request/security_commitment_pro.js";
+import { useRoute } from "vue-router";
+import ViewInfo from "../template/components/view.vue";
+import { uniqBy } from "lodash-es";
+
+const route = useRoute();
+const { PROMISE_ID } = route.query;
+const info = ref({});
+const data = reactive({
+  viewDialog: {
+    visible: false,
+    info: {},
+  },
+});
+const fnGetData = async () => {
+  const resData = await getAdministrationView({ PROMISE_ID });
+  const DETAIL = resData.promistDetail.map((item) => ({
+    value: item.COLLATERAL,
+    id: item.PROMISEDETAIL_ID,
+  }));
+  const people = resData.people;
+  const coverpeople = resData.coverpeople;
+  const newPeople = [];
+  const newCoverpeople = [];
+  for (let i = 0; i < people.length; i++) {
+    newPeople.push({
+      ...people[i],
+      USERNAME: [],
+      id: people[i].PROMISEPEOPLE_ID,
+    });
+    for (let j = 0; j < newPeople.length; j++) {
+      if (people[i].POST_ID === newPeople[j].POST_ID) {
+        newPeople[j].USERNAME.push(people[i].USERNAME);
+      }
+    }
+  }
+  for (let i = 0; i < coverpeople.length; i++) {
+    newCoverpeople.push({
+      ...coverpeople[i],
+      USERNAME: [],
+      id: coverpeople[i].PROMISEPEOPLE_ID,
+    });
+    for (let j = 0; j < newCoverpeople.length; j++) {
+      if (coverpeople[i].POST_ID === newCoverpeople[j].POST_ID) {
+        newCoverpeople[j].USERNAME.push(coverpeople[i].USERNAME);
+      }
+    }
+  }
+  info.value = {
+    ...resData.varList,
+    DETAIL,
+    people: uniqBy(newPeople, "POST_ID"),
+    coverpeople: uniqBy(newCoverpeople, "POST_ID"),
+  };
+};
+fnGetData();
+const fnView = () => {
+  data.viewDialog.info = {
+    ...info.value,
+    FILEPATH: "",
+    SIGNTIME: "",
+    COVERPEOPLE: info.value.coverpeople[0].USERNAME[0],
+  };
+  data.viewDialog.visible = true;
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/security_commitment_pro/template/add.vue

@@ -0,0 +1,151 @@
+<template>
+  <layout-card>
+    <el-form ref="formRef" :rules="rules" :model="form" label-width="100px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="承诺书名称" prop="PROMISE_NAME">
+            <el-input v-model="form.PROMISE_NAME" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="类型" prop="LEVEL">
+            <el-select v-model="form.TYPE">
+              <el-option value="0" label="承诺书" />
+              <el-option value="1" label="责任状" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="级别" prop="LEVEL">
+            <el-select v-model="form.LEVEL">
+              <el-option
+                v-for="item in commitmentLevelList"
+                :key="item.DICTIONARIES_ID"
+                :value="item.BIANMA"
+                :label="item.NAME"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="正文" prop="TEXT">
+            <el-input v-model="form.TEXT" type="textarea" autosize />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item class="end">
+            <el-button type="primary" @click="fnAddDetail">
+              新增副文
+            </el-button>
+          </el-form-item>
+        </el-col>
+        <el-col v-for="(item, index) in form.DETAIL" :key="item.id" :span="24">
+          <el-form-item
+            :label="'副文' + (index + 1)"
+            :prop="'DETAIL.' + index + '.value'"
+            :rules="{
+              required: true,
+              message: '副文不能为空',
+              trigger: 'blur',
+            }"
+          >
+            <div
+              style="
+                flex: 1;
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-start;
+              "
+            >
+              <el-input
+                v-model="item.value"
+                type="textarea"
+                :autosize="{ minRows: 3 }"
+              />
+              <el-button
+                class="ml-10"
+                v-if="index !== 0"
+                type="danger"
+                @click="form.DETAIL.splice(index, 1)"
+              >
+                删除
+              </el-button>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="tc mt-10">
+      <el-button type="primary" @click="fnSubmit">提 交</el-button>
+    </div>
+  </layout-card>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { layoutFnGetCommitmentLevel } from "@/assets/js/data_dictionary.js";
+import { debounce } from "throttle-debounce";
+import { useRoute, useRouter } from "vue-router";
+import useFormValidate from "@/assets/js/useFormValidate.js";
+import {
+  setTemplateAdd,
+  setTemplateEdit,
+  getTemplateView,
+} from "@/request/security_commitment_pro.js";
+import { ElMessage } from "element-plus";
+
+const route = useRoute();
+const router = useRouter();
+const { PROMISE_ID } = route.query;
+const rules = ref({
+  PROMISE_NAME: [
+    { required: true, message: "请输入承诺书名称", trigger: "blur" },
+  ],
+  TYPE: [{ required: true, message: "请选择类型", trigger: "blur" }],
+  LEVEL: [{ required: true, message: "请选择级别", trigger: "blur" }],
+  TEXT: [{ required: true, message: "请输入正文", trigger: "blur" }],
+});
+const form = ref({
+  PROMISE_NAME: "",
+  TYPE: "",
+  LEVEL: "",
+  TEXT: "",
+  DETAIL: [],
+});
+const formRef = ref(null);
+const fnAddDetail = () => {
+  form.value.DETAIL.push({ value: "", id: Math.random() });
+};
+const fnGetData = async () => {
+  if (!PROMISE_ID) {
+    fnAddDetail();
+    return;
+  }
+  const resData = await getTemplateView({ PROMISE_ID });
+  const DETAIL = resData.promistDetail.map((item) => ({
+    value: item.COLLATERAL,
+    id: item.PROMISEDETAIL_ID,
+  }));
+  form.value = { ...resData.varList, DETAIL };
+};
+fnGetData();
+const commitmentLevelList = await layoutFnGetCommitmentLevel();
+const fnSubmit = debounce(
+  1000,
+  async () => {
+    await useFormValidate(formRef);
+    const DETAIL = form.value.DETAIL.map((item, index) => ({
+      value: item.value,
+      index,
+    }));
+    PROMISE_ID
+      ? await setTemplateEdit({ ...form.value, DETAIL: JSON.stringify(DETAIL) })
+      : await setTemplateAdd({ ...form.value, DETAIL: JSON.stringify(DETAIL) });
+    ElMessage.success("操作成功");
+    router.back();
+  },
+  { atBegin: true }
+);
+</script>
+
+<style scoped lang="scss"></style>

src/views/security_commitment_pro/template/components/view.vue

@@ -0,0 +1,187 @@
+<template>
+  <el-dialog v-model="visible" title="安全生产承诺书">
+    <div id="print" class="dialogContent">
+      <div class="cover print_use">
+        <h1>
+          {{ info.TYPE === "0" ? "安全生产承诺书" : "安全生产责任状" }}
+        </h1>
+        <div>
+          <div>河 北 港 口 集 团 有 限 公 司</div>
+          <div>
+            （{{
+              info.PROMISE_TERM_START &&
+              dayjs(info.PROMISE_TERM_START).format("YYYY年")
+            }}）
+          </div>
+        </div>
+      </div>
+      <h1 class="title">
+        {{ info.TYPE === "0" ? "安全生产承诺书" : "安全生产责任状" }}
+      </h1>
+      <div v-if="info.TYPE === '0'">{{ info.COVERPEOPLE }}：</div>
+      <div class="text">{{ info.TEXT }}</div>
+      <div class="collateral">
+        <div v-for="(item, index) in info.DETAIL" :key="index" class="item">
+          {{ item.value }}
+        </div>
+      </div>
+      <div class="text">
+        <div v-if="info.TYPE === '0'">
+          若违反上述承诺和未履行安全生产职责，或发生责任事故的，接受政府或公司事故调查组做出的处罚决定。
+        </div>
+        <div v-if="info.TYPE === '0'">
+          承诺期限自{{
+            info.PROMISE_TERM_START &&
+            dayjs(info.PROMISE_TERM_START).format("YYYY年MM月DD日")
+          }}至{{
+            info.PROMISE_TERM_END &&
+            dayjs(info.PROMISE_TERM_END).format("YYYY年MM月DD日")
+          }}。
+        </div>
+        <div v-if="info.TYPE === '1'">
+          若未履行安全生产职责，或发生生产安全事故的，接受公司或政府事故调查组做出的处罚。
+        </div>
+        <div v-if="info.TYPE === '1'">
+          责任期限自{{
+            info.PROMISE_TERM_START &&
+            dayjs(info.PROMISE_TERM_START).format("YYYY年MM月DD日")
+          }}至{{
+            info.PROMISE_TERM_END &&
+            dayjs(info.PROMISE_TERM_END).format("YYYY年MM月DD日")
+          }}。
+        </div>
+      </div>
+      <div
+        :style="{ alignItems: info.FILEPATH ? 'flex-end' : 'flex-start' }"
+        class="footer"
+      >
+        <div
+          v-if="info.TYPE === '0'"
+          :style="{ marginBottom: info.FILEPATH ? '50px' : '0px' }"
+          class="hairdresser"
+        >
+          承诺单位(盖章)：
+        </div>
+        <div v-if="info.TYPE === '1'" class="hairdresser">
+          <div class="promiser">发状人：{{ info.COVERPEOPLE }}</div>
+          <div class="time">
+            {{
+              info.CREATTIME && dayjs(info.CREATTIME).format("YYYY年MM月DD日")
+            }}
+          </div>
+        </div>
+        <div class="respondent">
+          <div class="promiser">
+            <span :style="{ marginRight: info.FILEPATH ? '0px' : '105px' }">
+              {{ info.TYPE === "0" ? "主要负责人签字" : "受状人" }}：
+            </span>
+            <img
+              v-if="info.FILEPATH"
+              :src="VITE_FILE_URL + info.FILEPATH"
+              alt=""
+            />
+          </div>
+          <div
+            :style="{ marginLeft: info.TYPE === '0' ? '125px' : '65px' }"
+            class="time"
+          >
+            {{ info.SIGNTIME && dayjs(info.SIGNTIME).format("YYYY年MM月DD日") }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="visible = false">关 闭</el-button>
+      <el-button v-print="'#print'" type="primary">打 印</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useVModel } from "@vueuse/core";
+import dayjs from "dayjs";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  info: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(["update:visible"]);
+const visible = useVModel(props, "visible", emits);
+const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
+</script>
+
+<style scoped lang="scss">
+#print {
+  padding: 50px;
+  font-size: 16px;
+
+  .cover {
+    height: 841pt;
+    text-align: center;
+    position: relative;
+
+    h1 {
+      padding-top: 300px;
+    }
+
+    > div {
+      position: absolute;
+      bottom: 100px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .title {
+    text-align: center;
+  }
+
+  .text {
+    text-indent: 35px;
+    line-height: 26px;
+    letter-spacing: 2px;
+    text-align: justify;
+  }
+
+  .collateral {
+    text-indent: 35px;
+    line-height: 26px;
+    letter-spacing: 2px;
+    text-align: justify;
+  }
+
+  .footer {
+    text-indent: 35px;
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .respondent,
+  .hairdresser {
+    .promiser {
+      display: flex;
+      align-items: flex-end;
+
+      img {
+        margin-left: 30px;
+        width: 200px;
+        height: 100px;
+      }
+    }
+
+    .time {
+      margin-top: 30px;
+      margin-left: 65px;
+    }
+  }
+}
+</style>

src/views/security_commitment_pro/template/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="90px"
+        @submit.prevent="fnResetPagination"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="承诺书名称" prop="KEYWORDS">
+              <el-input v-model="searchForm.KEYWORDS" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="10px">
+              <el-button type="primary" native-type="submit">搜索</el-button>
+              <el-button native-type="reset" @click="fnResetPagination">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <layout-card>
+      <layout-table
+        :data="list"
+        @get-data="fnGetData"
+        v-model:pagination="pagination"
+      >
+        <el-table-column label="序号" width="60">
+          <template #default="{ $index }">
+            {{ serialNumber(pagination, $index) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="PROMISE_NAME" label="承诺书名称" />
+        <el-table-column prop="LEVELNAME" label="级别" />
+        <el-table-column prop="CREATTIME" label="添加时间" />
+        <el-table-column label="状态">
+          <template v-slot="{ row }">
+            {{ row.ISDELETE === 0 ? "启用" : "禁用" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template v-slot="{ row }">
+            <el-button type="primary" text link @click="fnView(row.PROMISE_ID)">
+              查看
+            </el-button>
+            <el-button
+              type="primary"
+              text
+              link
+              @click="
+                fnEnableOrDisable(row.ISDELETE === 0 ? 1 : 0, row.PROMISE_ID)
+              "
+            >
+              {{ row.ISDELETE === 0 ? "禁用" : "启用" }}
+            </el-button>
+            <el-button
+              type="primary"
+              text
+              link
+              @click="fnDelete(row.PROMISE_ID)"
+            >
+              删除
+            </el-button>
+            <el-button
+              type="primary"
+              text
+              link
+              @click="
+                router.push({
+                  path: '/security_commitment_pro/template/edit',
+                  query: { PROMISE_ID: row.PROMISE_ID },
+                })
+              "
+            >
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+        <template #button>
+          <el-button
+            type="primary"
+            @click="
+              router.push({ path: '/security_commitment_pro/template/add' })
+            "
+          >
+            新增
+          </el-button>
+        </template>
+      </layout-table>
+    </layout-card>
+    <view-info
+      v-model:visible="data.viewDialog.visible"
+      :info="data.viewDialog.info"
+    />
+  </div>
+</template>
+
+<script setup>
+import { serialNumber } from "@/assets/js/utils";
+import useListData from "@/assets/js/useListData.js";
+import {
+  setTemplateDelete,
+  setTemplateEnableOrDisable,
+  getTemplateList,
+  getTemplateView,
+} from "@/request/security_commitment_pro.js";
+import { debounce } from "throttle-debounce";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive } from "vue";
+import ViewInfo from "./components/view.vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const { list, pagination, searchForm, fnGetData, fnResetPagination } =
+  useListData(getTemplateList);
+const data = reactive({
+  viewDialog: {
+    visible: false,
+    info: {},
+  },
+});
+const fnView = async (PROMISE_ID) => {
+  const resData = await getTemplateView({ PROMISE_ID });
+  const DETAIL = resData.promistDetail.map((item) => ({
+    value: item.COLLATERAL,
+    id: item.PROMISEDETAIL_ID,
+  }));
+  data.viewDialog.info = { ...resData.varList, DETAIL, COVERPEOPLE: "XXX" };
+  data.viewDialog.visible = true;
+};
+const fnEnableOrDisable = debounce(
+  1000,
+  async (ISDELETE, PROMISE_ID) => {
+    const message = ISDELETE === 0 ? "启用" : "禁用";
+    await ElMessageBox.confirm(`确定要${message}当前承诺书吗？`, {
+      type: "warning",
+    });
+    await setTemplateEnableOrDisable({ PROMISE_ID, ISDELETE });
+    ElMessage.success(`${message}成功`);
+    fnResetPagination();
+  },
+  { atBegin: true }
+);
+const fnDelete = debounce(
+  1000,
+  async (PROMISE_ID) => {
+    await ElMessageBox.confirm(`确定要删除当前承诺书吗？`, {
+      type: "warning",
+    });
+    await setTemplateDelete({ PROMISE_ID });
+    ElMessage.success(`删除成功`);
+    fnResetPagination();
+  },
+  { atBegin: true }
+);
+</script>
+
+<style scoped></style>

src/views/statistical_analysis/inventory_statistics_month/index.vue

@@ -66,24 +66,15 @@
       </el-form>
     </el-card>
     <layout-card>
-      <div class="mb-10 flex">
+      <div class="mb-10">
-        <div>备注：红色日期代表周六日</div>
+        <span>备注：红色日期代表周六日</span>
-        <div class="flex ml-10">
+        <span class="ml-10">√ 完成检查</span>
-          <img src="/src/assets/images/print/white/check.png" alt="" />
+        <span class="ml-10">× 未进行检查</span>
-          完成检查
+        <span class="ml-10">
-        </div>
-        <div class="flex ml-10">
-          <img src="/src/assets/images/print/white/error.png" alt="" />
-          未进行检查
-        </div>
-        <div class="flex ml-10">
           <img src="/src/assets/images/print/white/waring.png" alt="" />
           离岗/休班/周期未结束
-        </div>
+        </span>
-        <div class="flex ml-10">
+        <span class="ml-10">- 未建立</span>
-          <img src="/src/assets/images/print/white/line.png" alt="" />
-          未建立
-        </div>
       </div>
       <layout-table
         :data="list"
@@ -154,15 +145,14 @@
                       .TYPE === '1'
                   "
                   style="position: relative"
-                  class="flex"
                 >
-                  <img src="/src/assets/images/print/white/check.png" alt="" />
+                  √
                   <span
                     v-if="
                       (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                         .CREATTIME === fnFormatDate(item)
                     "
-                    style="position: absolute; right: -6px; top: -6px"
+                    style="position: absolute; right: 0; top: -6px"
                   >
                     {{
                       (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || "")
@@ -178,20 +168,18 @@
                     (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                       .TYPE === '2'
                   "
-                  class="flex"
                 >
-                  <img src="/src/assets/images/print/white/error.png" alt="" />
+                  ×
                 </span>
                 <span
                   v-else-if="
                     (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                       .TYPE === '3'
                   "
-                  class="flex"
                 >
-                  <img src="/src/assets/images/print/white/line.png" alt="" />
+                  -
                 </span>
-                <span v-else class="flex">
+                <span v-else>
                   <img src="/src/assets/images/print/white/waring.png" alt="" />
                 </span>
               </template>
@@ -253,11 +241,6 @@ const fnFormatDate = (day) => {
 </script>
 
 <style scoped lang="scss">
-.flex {
-  display: flex;
-  align-items: center;
-}
-
 img {
   width: 16px;
   height: 16px;

src/views/statistical_analysis/inventory_statistics_month/print.vue

@@ -3,60 +3,15 @@
     <div id="printContent">
       <!--      TODO 打印分页截断-->
       <el-divider content-position="left">员工清单检查统计（月）</el-divider>
-      <div class="mb-10 flex">
+      <div class="mb-10">
-        <div>备注：</div>
+        <span>备注：</span>
-        <div class="flex ml-10">
+        <span class="ml-10">√ 完成检查</span>
-          <img
+        <span class="ml-10">× 未进行检查</span>
-            src="/src/assets/images/print/white/check.png"
+        <span class="ml-10">
-            alt=""
+          <img src="/src/assets/images/print/white/waring.png" alt="" />
-            class="print_no_use"
-          />
-          <img
-            src="/src/assets/images/print/black/check.png"
-            alt=""
-            class="print_use"
-          />
-          完成检查
-        </div>
-        <div class="flex ml-10">
-          <img
-            src="/src/assets/images/print/white/error.png"
-            alt=""
-            class="print_no_use"
-          />
-          <img
-            src="/src/assets/images/print/black/error.png"
-            alt=""
-            class="print_use"
-          />
-          未进行检查
-        </div>
-        <div class="flex ml-10">
-          <img
-            src="/src/assets/images/print/white/waring.png"
-            alt=""
-            class="print_no_use"
-          />
-          <img
-            src="/src/assets/images/print/black/waring.png"
-            alt=""
-            class="print_use"
-          />
           离岗/休班/周期未结束
-        </div>
+        </span>
-        <div class="flex ml-10">
+        <span class="ml-10">- 未建立</span>
-          <img
-            src="/src/assets/images/print/white/line.png"
-            alt=""
-            class="print_no_use"
-          />
-          <img
-            src="/src/assets/images/print/black/line.png"
-            alt=""
-            class="print_use"
-          />
-          未建立
-        </div>
       </div>
       <div class="print_no_use">
         <layout-table :data="list" :show-pagination="false">
@@ -109,18 +64,14 @@
                         .TYPE === '1'
                     "
                     style="position: relative"
-                    class="flex"
                   >
-                    <img
+                    √
-                      src="/src/assets/images/print/white/check.png"
-                      alt=""
-                    />
                     <span
                       v-if="
                         (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                           .CREATTIME === fnFormatDate(item)
                       "
-                      style="position: absolute; right: -6px; top: -6px"
+                      style="position: absolute; right: 0; top: -6px"
                     >
                       {{
                         (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || "")
@@ -138,23 +89,18 @@
                       (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                         .TYPE === '2'
                     "
-                    class="flex"
                   >
-                    <img
+                    ×
-                      src="/src/assets/images/print/white/error.png"
-                      alt=""
-                    />
                   </span>
                   <span
                     v-else-if="
                       (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                         .TYPE === '3'
                     "
-                    class="flex"
                   >
-                    <img src="/src/assets/images/print/white/line.png" alt="" />
+                    -
                   </span>
-                  <span v-else class="flex">
+                  <span v-else>
                     <img
                       src="/src/assets/images/print/white/waring.png"
                       alt=""
@@ -201,15 +147,14 @@
                       .TYPE === '1'
                   "
                   style="position: relative"
-                  class="flex"
                 >
-                  <img src="/src/assets/images/print/black/check.png" alt="" />
+                  √
                   <span
                     v-if="
                       (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || '')
                         .CREATTIME === fnFormatDate(item1)
                     "
-                    style="position: absolute; right: -6px; top: -6px"
+                    style="position: absolute; right: 0; top: -6px"
                   >
                     {{
                       (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || "")
@@ -222,20 +167,18 @@
                     (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || '')
                       .TYPE === '2'
                   "
-                  class="flex"
                 >
-                  <img src="/src/assets/images/print/black/error.png" alt="" />
+                  ×
                 </span>
                 <span
                   v-else-if="
                     (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || '')
                       .TYPE === '3'
                   "
-                  class="flex"
                 >
-                  <img src="/src/assets/images/print/black/line.png" alt="" />
+                  -
                 </span>
-                <span v-else class="flex">
+                <span v-else>
                   <img src="/src/assets/images/print/black/waring.png" alt="" />
                 </span>
               </template>
@@ -277,11 +220,6 @@ const fnFormatDate = (day) => {
 </script>
 
 <style scoped lang="scss">
-.flex {
-  display: flex;
-  align-items: center;
-}
-
 img {
   width: 16px;
   height: 16px;

src/views/troubleshooting_statistics/day_inspection/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="90px"
+        @submit.prevent="fnResetPaginationTransfer"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="清单名称" prop="KEYWORDS">
+              <el-input
+                v-model="searchForm.KEYWORDS"
+                placeholder="请输入关键字"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="人员" prop="USERNAME">
+              <el-input
+                v-model="searchForm.USERNAME"
+                placeholder="请输入关键字"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="部门" prop="DEPTIDS">
+              <layout-department
+                v-model="searchForm.DEPTIDS"
+                multiple
+                show-checkbox
+                collapse-tags
+                root-disabled="Y"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="清单类型">
+              <el-select v-model="searchForm.TYPE">
+                <el-option
+                  v-for="item in inventoryTypeList"
+                  :key="item.BIANMA"
+                  :label="item.NAME"
+                  :value="item.BIANMA"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="排查类型">
+              <el-select v-model="searchForm.RISKCHECKLISTTYPE">
+                <el-option
+                  v-for="item in troubleshootingTypeList"
+                  :key="item.BIANMA"
+                  :label="item.NAME"
+                  :value="item.BIANMA"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="清单级别">
+              <el-select v-model="searchForm.LISTINGLEVEL">
+                <el-option
+                  v-for="item in [
+                    { BIANMA: '1', NAME: '公司' },
+                    ...inventoryLevelList,
+                  ]"
+                  :key="item.BIANMA"
+                  :label="item.NAME"
+                  :value="item.BIANMA"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="10px">
+              <el-button type="primary" native-type="submit">搜索</el-button>
+              <el-button native-type="reset" @click="fnResetPaginationTransfer">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <layout-card>
+      <layout-table
+        :data="list"
+        v-model:pagination="pagination"
+        @get-data="fnGetDataTransfer"
+      >
+        <el-table-column label="序号" width="70">
+          <template v-slot="{ $index }">
+            {{ serialNumber(pagination, $index) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="NAME" label="清单名称" />
+        <el-table-column prop="DEPARTMENT_NAME_ALL" label="部门" />
+        <el-table-column prop="POST_NAME" label="岗位" />
+        <el-table-column prop="USER_NAME" label="人员" width="100" />
+        <el-table-column prop="PERIODNAME" label="排查周期" width="100" />
+        <el-table-column prop="SCREENTYPENAME" label="排查类型" width="100" />
+        <el-table-column prop="TYPENAME" label="清单类型" width="100" />
+        <el-table-column
+          v-if="SPECIAL_ENTERPRISES.includes(CORPINFO_ID)"
+          prop="TASK_TYPE_NAME"
+          label="任务类型"
+          width="100"
+        />
+        <el-table-column label="状态" width="100">
+          <template v-slot="{ row }">
+            <span v-if="row.ISDELETE === '0'">启用</span>
+            <span v-else-if="row.ISDELETE === '1'">禁用</span>
+            <span v-else-if="row.ISDELETE === '2'"> 已删除 </span>
+            <span v-else-if="row.ISDELETE === '-1'"> 彻底删除 </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template v-slot="{ row }">
+            <el-button
+              type="primary"
+              text
+              link
+              @click="
+                router.push({
+                  path: `/troubleshooting_statistics/${type}_inspection/inspection_records`,
+                  query: { LISTMANAGER_ID: row.LISTMANAGER_ID },
+                })
+              "
+            >
+              检查记录
+            </el-button>
+          </template>
+        </el-table-column>
+      </layout-table>
+    </layout-card>
+  </div>
+</template>
+
+<script setup>
+import { serialNumber } from "@/assets/js/utils.js";
+import { useRouter } from "vue-router";
+import useListData from "@/assets/js/useListData.js";
+import LayoutDepartment from "@/components/department/index.vue";
+import {
+  layoutFnGetInventoryLevel,
+  layoutFnGetInventoryType,
+  layoutFnGetTroubleshootingType,
+} from "@/assets/js/data_dictionary.js";
+import { SPECIAL_ENTERPRISES } from "@/assets/js/constant.js";
+import { useUserStore } from "@/pinia/user.js";
+import { getChecklistInspectionRecordList } from "@/request/troubleshooting_statistics.js";
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "day",
+  },
+});
+const router = useRouter();
+const userStore = useUserStore();
+const CORPINFO_ID = userStore.getUserInfo.CORPINFO_ID;
+const PERIOD = {
+  day: "checkPeriod0001",
+  week: "checkPeriod0002",
+  ten_day: "checkPeriod0003",
+};
+const { list, pagination, searchForm, fnGetData, fnResetPagination } =
+  useListData(getChecklistInspectionRecordList, {
+    otherParams: { PERIOD: PERIOD[props.type] },
+  });
+const fnGetDataTransfer = () => {
+  fnGetData({
+    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
+  });
+};
+const fnResetPaginationTransfer = () => {
+  fnResetPagination({
+    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
+  });
+};
+const inventoryTypeList = await layoutFnGetInventoryType();
+const troubleshootingTypeList = await layoutFnGetTroubleshootingType();
+const inventoryLevelList = await layoutFnGetInventoryLevel();
+</script>
+
+<style scoped></style>

src/views/troubleshooting_statistics/day_inspection/inspection_records.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="50px"
+        @submit.prevent="fnGetData"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="时间" prop="YEAR">
+              <el-date-picker
+                v-model="searchForm.YEAR"
+                :clearable="false"
+                type="year"
+                format="YYYY"
+                value-format="YYYY"
+                placeholder="选择年"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="10px">
+              <el-button type="primary" native-type="submit">搜索</el-button>
+              <el-button native-type="reset" @click="fnGetData">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <layout-card>
+      <div id="printContainer">
+        <div class="tc">
+          <h2>{{ info.NAME }}</h2>
+        </div>
+        <div class="mb-20">
+          <div
+            class="ptb-15"
+            style="display: flex; justify-content: space-between"
+          >
+            <div>排查人员：{{ info.USER_NAME }}</div>
+            <div>排查频次：每天</div>
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <th width="60" class="title">序号</th>
+                <th width="150" class="title">风险单元</th>
+                <th width="150" class="title">排查部位</th>
+                <th width="500" class="title">风险管控措施</th>
+                <th width="500" class="title">风险失控表现（问题隐患）</th>
+                <th width="150" class="title">失职部门和人员</th>
+                <th width="150" class="title">排查责任人</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in list" :key="index">
+                <td>{{ index + 1 }}</td>
+                <td>{{ item.RISKUNITNAME }}</td>
+                <td>{{ item.PARTSNAME }}</td>
+                <td>{{ item.CHECK_CONTENT }}</td>
+                <td>{{ item.RISK_DESCR }}</td>
+                <td>{{ item.DEPARTMENT_NAME }}/{{ item.USERNAME }}</td>
+                <td>{{ info.DEPARTMENT_NAME }}/{{ info.USER_NAME }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="tc">
+          <h3>日常隐患排查表</h3>
+        </div>
+        <div class="mb-20">
+          <div class="tr ptb-15">
+            （备注：√ 表示已检查，×表示未检查，<img
+              src="/src/assets/images/print/white/waring.png"
+              alt=""
+            />表示离岗/休班 ，-表示未建立）
+          </div>
+          <table>
+            <tr v-for="(item, index) in recordList" :key="index">
+              <td
+                v-for="(item1, index1) in item.TRLIST"
+                :key="index1"
+                style="width: 100px; vertical-align: baseline"
+              >
+                <table>
+                  <tbody>
+                    <template
+                      v-for="(item2, index2) in item1.TDLIST"
+                      :key="index2"
+                    >
+                      <tr>
+                        <td
+                          v-for="(item3, index3) in item2.DAYLIST"
+                          :key="index3"
+                        >
+                          {{ item3.DAY }}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          v-for="(item3, index3) in item2.DAYLIST"
+                          :key="index3"
+                          style="height: 38px"
+                        >
+                          <div v-if="item3.CHECKDATA === '△'">
+                            <img
+                              src="/src/assets/images/print/white/waring.png"
+                              alt=""
+                            />
+                          </div>
+                          <div v-else>{{ item3.CHECKDATA }}</div>
+                        </td>
+                      </tr>
+                    </template>
+                  </tbody>
+                  <tr>
+                    <td colspan="7">
+                      <div>{{ item1.MONTH }}月检查发现问题描述：</div>
+                      <div
+                        v-for="(item4, index4) in item1.HDLIST"
+                        :key="index4"
+                      >
+                        {{ item4 }}
+                      </div>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div class="mt-10 tc">
+        <el-button type="primary" v-print="'#printContainer'">打 印</el-button>
+      </div>
+      <div v-html="PRINT_STYLE" />
+    </layout-card>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import { getChecklistInspectionRecordDayInspectionList } from "@/request/troubleshooting_statistics.js";
+import useListData from "@/assets/js/useListData.js";
+import dayjs from "dayjs";
+import { ref } from "vue";
+import { PRINT_STYLE } from "@/assets/js/constant.js";
+
+const route = useRoute();
+const { LISTMANAGER_ID } = route.query;
+const info = ref({});
+const recordList = ref([]);
+const { list, searchForm, fnGetData } = useListData(
+  getChecklistInspectionRecordDayInspectionList,
+  {
+    otherParams: { LISTMANAGER_ID },
+    defaultSearchForm: { YEAR: dayjs().format("YYYY") },
+    usePagination: false,
+    callbackFn: (list, resData) => {
+      info.value = resData.pd;
+      recordList.value = resData.recordList;
+    },
+  }
+);
+</script>
+
+<style scoped lang="scss">
+table {
+  border-collapse: collapse;
+  width: 100%;
+
+  td,
+  th {
+    border: 1px solid var(--el-border-color);
+    padding: 8px 12px;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .title {
+    background: var(--el-fill-color-light);
+  }
+}
+
+img {
+  width: 16px;
+  height: 16px;
+}
+</style>

src/views/troubleshooting_statistics/ten_day_inspection/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <index-view type="ten_day" />
+</template>
+
+<script setup>
+import IndexView from "../day_inspection/index.vue";
+</script>
+
+<style scoped lang="scss"></style>

src/views/troubleshooting_statistics/ten_day_inspection/inspection_records.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="50px"
+        @submit.prevent="fnGetData"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="时间" prop="YEAR">
+              <el-date-picker
+                v-model="searchForm.YEAR"
+                :clearable="false"
+                type="year"
+                format="YYYY"
+                value-format="YYYY"
+                placeholder="选择年"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="10px">
+              <el-button type="primary" native-type="submit">搜索</el-button>
+              <el-button native-type="reset" @click="fnGetData">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <layout-card>
+      <div id="printContainer">
+        <div class="tc">
+          <h2>{{ info.NAME }}</h2>
+        </div>
+        <div class="mb-20">
+          <div
+            class="ptb-15"
+            style="display: flex; justify-content: space-between"
+          >
+            <div>排查部门：{{ info.DEPARTMENT_NAME }}</div>
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <th width="60" class="title">序号</th>
+                <th width="150" class="title">风险单元</th>
+                <th width="150" class="title">排查部位</th>
+                <th width="500" class="title">风险管控措施</th>
+                <th width="500" class="title">风险失控表现（问题隐患）</th>
+                <th width="150" class="title">失职部门和人员</th>
+                <th width="150" class="title">排查责任人</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in list" :key="index">
+                <td>{{ index + 1 }}</td>
+                <td>{{ item.RISKUNITNAME }}</td>
+                <td>{{ item.PARTSNAME }}</td>
+                <td>{{ item.CHECK_CONTENT }}</td>
+                <td>{{ item.RISK_DESCR }}</td>
+                <td>{{ item.DEPARTMENT_NAME }}/{{ item.USERNAME }}</td>
+                <td>{{ info.DEPARTMENT_NAME }}/{{ info.USER_NAME }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="tc">
+          <h3>{{ YEAR }}年旬检清单排查表</h3>
+        </div>
+        <div
+          class="ptb-15"
+          style="display: flex; justify-content: space-between"
+        >
+          <div>检查方式：现场检查</div>
+          <div>检查人员：{{ info.USER_NAME }}</div>
+          <div class="tr">
+            检查频次：每旬至少一次（备注：√ 表示已检查，×表示未检查，<img
+              src="/src/assets/images/print/white/waring.png"
+              alt=""
+            />表示离岗/休班 ，-表示未建立）
+          </div>
+        </div>
+        <table>
+          <tr v-for="(item, index) in recordList" :key="index">
+            <td
+              v-for="(item1, index1) in item.TRLIST"
+              :key="index1"
+              :colspan="item1.COLSPAN"
+              :rowspan="item1.ROWSPAN"
+              style="width: 100px"
+            >
+              <div v-if="item1.VALUETYPE === 'string' && item1.VALUE === '△'">
+                <img
+                  src="/src/assets/images/print/white/waring.png"
+                  alt=""
+                  width="16"
+                  height="16"
+                />
+              </div>
+              <div
+                v-else-if="item1.VALUETYPE === 'string' && item1.VALUE !== '△'"
+              >
+                {{ item1.VALUE }}
+              </div>
+              <div v-else-if="item1.VALUETYPE === 'array'">
+                <div v-for="(item2, index2) in item1.VALUE" :key="index2">
+                  {{ index2 + 1 }}.{{ item2 }}
+                </div>
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div class="mt-10 tc">
+        <el-button type="primary" v-print="'#printContainer'">打 印</el-button>
+      </div>
+      <div v-html="PRINT_STYLE" />
+    </layout-card>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import { getChecklistInspectionRecordTenDayInspectionList } from "@/request/troubleshooting_statistics.js";
+import useListData from "@/assets/js/useListData.js";
+import dayjs from "dayjs";
+import { ref } from "vue";
+import { PRINT_STYLE } from "@/assets/js/constant.js";
+
+const route = useRoute();
+const { LISTMANAGER_ID } = route.query;
+const info = ref({});
+const recordList = ref([]);
+const YEAR = ref("");
+const { list, searchForm, fnGetData } = useListData(
+  getChecklistInspectionRecordTenDayInspectionList,
+  {
+    otherParams: { LISTMANAGER_ID },
+    defaultSearchForm: { YEAR: dayjs().format("YYYY") },
+    usePagination: false,
+    callbackFn: (list, resData) => {
+      info.value = resData.pd;
+      recordList.value = resData.recordList;
+      YEAR.value = searchForm.value.YEAR;
+    },
+  }
+);
+</script>
+
+<style scoped lang="scss">
+table {
+  border-collapse: collapse;
+  width: 100%;
+
+  td,
+  th {
+    border: 1px solid var(--el-border-color);
+    padding: 8px 12px;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .title {
+    background: var(--el-fill-color-light);
+  }
+}
+
+img {
+  width: 16px;
+  height: 16px;
+}
+</style>

src/views/troubleshooting_statistics/week_inspection/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <index-view type="week" />
+</template>
+
+<script setup>
+import IndexView from "../day_inspection/index.vue";
+</script>
+
+<style scoped lang="scss"></style>

src/views/troubleshooting_statistics/week_inspection/inspection_records.vue

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <el-card>
+      <el-form
+        :model="searchForm"
+        label-width="50px"
+        @submit.prevent="fnGetData"
+      >
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="时间" prop="YEAR">
+              <el-date-picker
+                v-model="searchForm.YEAR"
+                :clearable="false"
+                type="year"
+                format="YYYY"
+                value-format="YYYY"
+                placeholder="选择年"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="10px">
+              <el-button type="primary" native-type="submit">搜索</el-button>
+              <el-button native-type="reset" @click="fnGetData">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <layout-card>
+      <div id="printContainer">
+        <div class="tc">
+          <h2>{{ info.NAME }}</h2>
+        </div>
+        <div class="mb-20">
+          <div
+            class="ptb-15"
+            style="display: flex; justify-content: space-between"
+          >
+            <div>排查部门：{{ info.DEPARTMENT_NAME }}</div>
+          </div>
+          <table>
+            <thead>
+              <tr>
+                <th width="60" class="title">序号</th>
+                <th width="150" class="title">风险单元</th>
+                <th width="150" class="title">排查部位</th>
+                <th width="500" class="title">风险管控措施</th>
+                <th width="500" class="title">风险失控表现（问题隐患）</th>
+                <th width="150" class="title">失职部门和人员</th>
+                <th width="150" class="title">排查责任人</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, index) in list" :key="index">
+                <td>{{ index + 1 }}</td>
+                <td>{{ item.RISKUNITNAME }}</td>
+                <td>{{ item.PARTSNAME }}</td>
+                <td>{{ item.CHECK_CONTENT }}</td>
+                <td>{{ item.RISK_DESCR }}</td>
+                <td>{{ item.DEPARTMENT_NAME }}/{{ item.USERNAME }}</td>
+                <td>{{ info.DEPARTMENT_NAME }}/{{ info.USER_NAME }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="tc">
+          <h3>{{ YEAR }}年周检清单排查表</h3>
+        </div>
+        <div
+          class="ptb-15"
+          style="display: flex; justify-content: space-between"
+        >
+          <div>检查方式：现场检查</div>
+          <div>检查人员：{{ info.USER_NAME }}</div>
+          <div class="tr">
+            检查频次：每周一次（备注：√ 表示已检查，×表示未检查，<img
+              src="/src/assets/images/print/white/waring.png"
+              alt=""
+            />表示离岗/休班 ，-表示未建立）
+          </div>
+        </div>
+        <table>
+          <tr v-for="(item, index) in recordList" :key="index">
+            <td
+              v-for="(item1, index1) in item.TRLIST"
+              :key="index1"
+              :colspan="item1.COLSPAN"
+              :rowspan="item1.ROWSPAN"
+              style="width: 100px"
+            >
+              <div v-if="item1.VALUETYPE === 'string' && item1.VALUE === '△'">
+                <img src="/src/assets/images/print/white/waring.png" alt="" />
+              </div>
+              <div
+                v-else-if="item1.VALUETYPE === 'string' && item1.VALUE !== '△'"
+              >
+                {{ item1.VALUE }}
+              </div>
+              <div v-else-if="item1.VALUETYPE === 'array'">
+                <div v-for="(item3, index2) in item1.VALUE" :key="index2">
+                  {{ index2 + 1 }}.{{ item3 }}
+                </div>
+              </div>
+            </td>
+          </tr>
+        </table>
+      </div>
+      <div class="mt-10 tc">
+        <el-button type="primary" v-print="'#printContainer'">打 印</el-button>
+      </div>
+      <div v-html="PRINT_STYLE" />
+    </layout-card>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import { getChecklistInspectionRecordWeekInspectionList } from "@/request/troubleshooting_statistics.js";
+import useListData from "@/assets/js/useListData.js";
+import dayjs from "dayjs";
+import { ref } from "vue";
+import { PRINT_STYLE } from "@/assets/js/constant.js";
+
+const route = useRoute();
+const { LISTMANAGER_ID } = route.query;
+const info = ref({});
+const recordList = ref([]);
+const YEAR = ref("");
+const { list, searchForm, fnGetData } = useListData(
+  getChecklistInspectionRecordWeekInspectionList,
+  {
+    otherParams: { LISTMANAGER_ID },
+    defaultSearchForm: { YEAR: dayjs().format("YYYY") },
+    usePagination: false,
+    callbackFn: (list, resData) => {
+      info.value = resData.pd;
+      recordList.value = resData.recordList;
+      YEAR.value = searchForm.value.YEAR;
+    },
+  }
+);
+</script>
+
+<style scoped lang="scss">
+table {
+  border-collapse: collapse;
+  width: 100%;
+
+  td,
+  th {
+    border: 1px solid var(--el-border-color);
+    padding: 8px 12px;
+    font-size: 14px;
+    text-align: center;
+  }
+
+  .title {
+    background: var(--el-fill-color-light);
+  }
+}
+
+img {
+  width: 16px;
+  height: 16px;
+}
+</style>