风险类型管理

src/views/comprehensiveGuarantee/MaterialReserveManagement/TypesMaterialsManagement.vue

@@ -1,13 +1,13 @@
 <!--物资种类管理-->
 <template>
   <div>
-    <div v-show="!addOutboundState.show && !outboundDetailsState.show" class="app-container">
+    <div v-show="!addTypesMaterialsState.show && ! impotTypesMaterialsState.show" class="app-container">
       <div>
         <transition name="fade">
           <el-row :gutter="30" style="height: 50px">
             <el-col :span="10">
-              <el-button type="primary" @click="handleAdd">新增出库</el-button>
-              <el-button type="primary" @click="handleAdd">数据导入</el-button>
+              <el-button type="primary" @click="handleAdd">新增</el-button>
+              <el-button type="primary" @click="handleImport">数据导入</el-button>
             </el-col>
           </el-row>
         </transition>
@@ -22,8 +22,9 @@
           <el-table-column label="显示状态（0隐藏 1显示）" align="center" prop="display_status" show-overflow-tooltip/>
           <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
             <template #default="scope">
-              <el-button type="text" class="common-btn-text-primary" @click="handleWrite">查看</el-button>
-              <el-button type="text" class="common-btn-text-primary" @click="handleView">明细</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="handleAdd">详情</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="handleAdd">编辑</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="handleView">移除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -36,13 +37,13 @@
         />
       </div>
     </div>
-    <addOutbound v-if="addOutboundState.show" @close="handleCancel" />
-    <outboundDetails v-if="outboundDetailsState.show" @close="handleCancel" />
+    <addTypesMaterials v-if="addTypesMaterialsState.show" @close="handleCancel" />
+    <impotTypesMaterials v-if="impotTypesMaterialsState.show" @close="handleCancel" />
   </div>
 </template>
 <script setup lang="ts">
-import addOutbound from "./addOutbound.vue";
-import outboundDetails from "./outboundDetails.vue";
+import addTypesMaterials from "./addTypesMaterials.vue";
+import impotTypesMaterials from "./impotTypesMaterials.vue";
 import { ref,reactive, onMounted, onBeforeUnmount } from "vue";
 // 定义响应式变量
 const loading = ref(false);
@@ -110,28 +111,33 @@ const tableData = [
   }
 ];
 
-const addOutboundState = reactive({
+const addTypesMaterialsState = reactive({
   show: false, // 初始化show为false
 });
+
 const outboundDetailsState = reactive({
   show: false, // 初始化show为false
 });
 
+const impotTypesMaterialsState = reactive({
+  show: false,
+})
+
 const handleAdd = () => {
-  addOutboundState.show = true;
+  addTypesMaterialsState.show = true;
 };
 
 const upload = () => {
   // 这里可能需要实现上传逻辑，暂时只是显示WriteForm作为示例
-  addOutboundState.show = true;
+  addTypesMaterialsState.show = true;
 };
 
 const handleCancel = () => {
-  addOutboundState.show = false;
+  addTypesMaterialsState.show = false;
 };
 
-const handleWrite = () => {
-  outboundDetailsState.show=true;
+const handleImport = () => {
+  impotTypesMaterialsState.show=true;
 };
 
 const handleView = () => {

src/views/comprehensiveGuarantee/MaterialReserveManagement/addOutbound.vue

@@ -1,5 +1,5 @@
 <template>
-  <div  class="common-dialog">
+  <div class="common-dialog">
     <div class="common-dialog-content">
       <div class="common-dialog-title-box">
         <i class="common-dialog-title-icon" />
@@ -54,26 +54,6 @@
           <el-form-item label="发货人手机：" prop="event_source">
             <el-input v-model="form.event_source" placeholder="请输入发货人手机" style="width: 468px !important" />
           </el-form-item>
-
-          <el-form-item label="发货人地址：" prop="event_source">
-            <el-input v-model="form.event_source" placeholder="请输入发货人地址" style="width: 468px !important" />
-          </el-form-item>
-
-          <el-form-item label="发货方备注：" prop="event_source">
-            <el-input v-model="form.event_source" placeholder="请输入发货方备注" style="width: 468px !important" />
-          </el-form-item>
-
-          <el-form-item label="收货人姓名：" prop="event_source">
-            <el-input v-model="form.event_source" placeholder="请输入收货人姓名" style="width: 468px !important" />
-          </el-form-item>
-
-          <el-form-item label="收货人手机：" prop="event_source">
-            <el-input v-model="form.event_source" placeholder="请输入收货人手机" style="width: 468px !important" />
-          </el-form-item>
-
-          <el-form-item label="收货人地址：" prop="event_source">
-            <el-input v-model="form.event_source" placeholder="请输入收货人地址" style="width: 468px !important" />
-          </el-form-item>
         </el-form>
         <div class="common-dialog-footer">
           <el-button @click="closeDialog">取消</el-button>

src/views/comprehensiveGuarantee/MaterialReserveManagement/addTypesMaterials.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <i class="common-dialog-title-icon" />
+        <div>新增出库单</div>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="120px">
+          <el-form-item label="物资类别id：" prop="material_category_id">
+            <el-input v-model="form.material_category_id" placeholder="请输入物资类别id" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="父类id：" prop="parent_category_id">
+            <el-input v-model="form.parent_category_id" placeholder="请输入父类id" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="物资类别名称：" prop="material_category_name">
+            <el-input v-model="form.material_category_name" placeholder="请输入物资类别名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="物资类别等级：" prop="material_category_level">
+            <el-input v-model="form.material_category_level" placeholder="请输入物资类别等级" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="排序：" prop="sort_order">
+            <el-input v-model="form.sort_order" placeholder="请输入排序" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="显示状态（0隐藏 1显示）：" prop="display_status">
+            <el-select v-model="form.display_status" placeholder="请选择显示状态">
+              <el-option label="隐藏" value="0"></el-option>
+              <el-option label="显示" value="1"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, toRefs } from 'vue';
+const emits = defineEmits(['close']);
+const buttonLoading = ref(false);
+// 表单初始数据
+const initFormData = {
+  material_category_id: '',         // 物资类别id
+  parent_category_id: '',           // 父类id
+  material_category_name: '',       // 物资类别名称
+  material_category_level: '',      // 物资类别等级
+  sort_order: '',                   // 排序
+  display_status: ''
+};
+
+// 表单数据
+const data = reactive({
+  form: { ...initFormData },
+  rules: {
+    event_title: [{ required: true, message: '事件标题不能为空', trigger: 'blur' }],
+    event_type: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
+    event_level: [{ required: true, message: '事件等级不能为空', trigger: 'blur' }],
+    event_status: [{ required: true, message: '事件状态不能为空', trigger: 'blur' }],
+    address: [{ required: true, message: '事件地点不能为空', trigger: 'blur' }],
+    event_time: [{ required: true, message: '事发时间不能为空', trigger: 'blur' }],
+    report_time: [{ required: true, message: '上报时间不能为空', trigger: 'blur' }],
+    event_source: [{ required: true, message: '事件来源不能为空', trigger: 'blur' }],
+    event_description: [{ required: true, message: '事件描述不能为空', trigger: 'blur' }],
+    contact: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+
+const closeDialog = () => {
+  emits('close');
+};
+const submitForm = () => {
+}
+</script>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  span {
+    white-space: nowrap;
+  }
+}
+</style>

src/views/comprehensiveGuarantee/MaterialReserveManagement/impotTypesMaterials.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="ya_bar">
+<!--    <h3>请导入物资类别</h3>-->
+    <el-button type="primary" @click="importDoc()"> 数据导入 </el-button>
+  </div>
+  <el-card shadow="hover" v-show="doc_items.length > 0">
+    <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick2">
+      <el-tab-pane :label="item.title" :name="item.id" v-for="(item, index) in doc_items" :key="index">
+        <div>
+          <el-row>
+            <el-col :span="4">
+              <el-anchor container="`containerRef${index}`" direction="vertical" type="default" :offset="30" @click="handleClick1">
+                <el-anchor-link :href="sub_item.href" :title="sub_item.title"  :name="sub_item.id" v-for="(sub_item, index2) in item.items" :key="index2"/>
+              </el-anchor>
+            </el-col>
+            <el-col :span="20">
+              <div ref="`containerRef${index}`" style="height: 400px; overflow-y: auto">
+                <div :id="sub_item.id" style="height: auto; margin-top: 15px; font-size: 14px" v-for="(sub_item, index3) in item.items" :key="index3">
+                  <h3 style="font-weight: 600">{{ sub_item.title }}</h3>
+                  <span v-html="sub_item.value"></span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
+
+  <el-dialog ref="formDialogRef" v-model="showImportDlg"  title="导入结构化文档" width="500px" append-to-body>
+    <el-form ref="formRef" :model="form" :rules="rules">
+      <FileUpload v-model="form.filename" :file-type="['xls', 'xlsx']" :limit="1" />
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
+import { getDoc, importDocXls } from '@/api/riskPrevention/planManage';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+// const containerRef = ref<HTMLElement | null>(null);
+const doc_items = ref([]);
+const props = defineProps({
+  id: String
+});
+
+watch(
+  () => props.id,
+  () => {
+    if (props.id) {
+      getData();
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+const handleClick1 = (e: MouseEvent) => {
+  e.preventDefault();
+};
+
+const activeName = ref('first');
+const handleClick2 = (tab: TabsPaneContext, event: Event) => {
+  // console.log(tab, event);
+};
+
+const getData = () => {
+  getDoc({plan_id: props.id})
+    .then((res)=> {
+      doc_items.value = res.data;
+      if(doc_items.value.length > 0) {
+        activeName.value = doc_items.value[0].id;
+      }
+    })
+}
+
+const showImportDlg = ref(false);
+const formDialogRef = ref(null);
+const formRef = ref<ElFormInstance>();
+const buttonLoading = ref(false);
+
+const form = ref({
+  filename: ''
+});
+
+const rules = reactive({
+  filename: [{ required: true, message: '导入文件不能为空', trigger: 'blur' }]
+});
+
+const importDoc = () => {
+  resetForm();
+  showImportDlg.value = true;
+}
+
+const resetForm = () => {
+  form.value = {
+    filename:''
+  }
+  formRef.value?.resetFields();
+  formRef.value?.clearValidate();
+}
+
+/**提交按钮 */
+const submitForm = () => {
+  formRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        buttonLoading.value = true;
+        await importDocXls({ ...form.value, plan_id: props.id })
+        proxy?.$modal.msgSuccess('导入成功');
+        showImportDlg.value = false;
+        getData();
+      } finally {
+        buttonLoading.value = false;
+      }
+    }
+  })
+}
+
+
+/** 取消按钮 */
+const cancel = () => {
+  resetForm();
+  showImportDlg.value = false;
+};
+</script>
+
+
+<style lang="scss" scoped>
+.ya_bar {
+  display:flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content:space-between;
+  align-items: center;
+}
+
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+</style>