新增模板

2 weeks ago · d7987d0f5c
4 changed files with 187 additions and 61 deletions
--- a/src/views/performanceIndicator/templateContent/addTemplate.vue
+++ b/src/views/performanceIndicator/templateContent/addTemplate.vue
@ -0,0 +1,121 @@
+<template>
+  <a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%">
+    <div style="margin: 20px">
+      <a-form :model="form" layout="vertical" ref="formRef" :rules="rules">
+        <a-row :gutter="[16, 16]">
+          <a-col :span="24">
+            <a-form-item label="考核名称" name="name">
+              <a-input v-model:value="form.name" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[16, 16]">
+          <a-col :span="24">
+            <a-form-item label="上级指导处" name="superLeader">
+              <a-input v-model:value="form.superLeader" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[16, 16]">
+          <a-col :span="24">
+            <a-form-item label="责任单位" name="dutyWorkplace">
+              <a-input v-model:value="form.dutyWorkplace" placeholder="请输入" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[16, 16]">
+          <a-col :span="24">
+            <a-form-item label="模板" name="file">
+              <a-upload v-model:file-list="fileLists" :before-upload="beforeUpload" :multiple="false" :maxCount="1">
+                <a-button type="primary"> 上传 </a-button>
+              </a-upload>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+  import { reactive, ref } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { addPerformance } from './templateContent.api';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { getToken } from '@/utils/auth';
+  export default {
+    setup(props, { emit }) {
+      const title = ref('新增');
+      const formRef = ref();
+      const visible = ref(false);
+      const form = reactive({
+        file: '',
+        name: '',
+        superLeader: '',
+        dutyWorkplace: '',
+      });
+      const fileLists = ref([]);
+      const showModal = () => {
+        visible.value = true;
+      };
+      const rules = {
+        name: [{ required: true, message: '请输入' }],
+        superLeader: [{ required: true, message: '请输入' }],
+        dutyWorkplace: [{ required: true, message: '请输入' }],
+      };
+      const beforeUpload = async (file) => {
+        console.log(file);
+        form.file = file;
+        return false;
+      };
+      const handleOk = () => {
+        formRef.value.validate().then((valid) => {
+          if (valid) {
+            if(fileLists.value.length>0){
+            let params = {};
+            params.file = form.file;
+            params.performance = {
+              name: form.name,
+              superLeader: form.superLeader,
+              dutyWorkplace: form.dutyWorkplace,
+            };
+            params.name = params.name
+            addPerformance(params).then((_) => {
+              message.success('新增成功');
+              emit('success');
+              closeModal();
+            });
+            }else{
+              message.warning('请上传模板')
+            }
+          }
+        });
+      };
+      const closeModal = () => {
+        formRef.value.resetFields();
+        fileLists.value = [];
+        visible.value = false;
+      };
+      return {
+        visible,
+        title,
+        form,
+        showModal,
+        handleOk,
+        formRef,
+        closeModal,
+        rules,
+        fileLists,
+        beforeUpload,
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  /* 可选样式调整 */
+  .ant-modal-body {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+</style>
--- a/src/views/performanceIndicator/templateContent/index.vue
+++ b/src/views/performanceIndicator/templateContent/index.vue
@ -1,57 +1,59 @@
 <template>
-  
  <PageWrapper dense>
    <!--引用表格-->
    <BasicTable @register="registerTable">
+      <template #tableTitle>
+        <el-button type="primary" @click="handleAdd" v-if="isShowByRoles('projectContact')">
+          新增模板</el-button
+        >
+      </template>
      <template #action="{ record }">
-              <TableAction :actions="getTableAction(record)" />
-          </template>
+        <TableAction :actions="getTableAction(record)" />
+      </template>
    </BasicTable>
    <detailTemplateContent @register="registerDetail" />
-    <modify @register="registerModify" @close="closeModel"/>
+    <modify @register="registerModify" @close="closeModel" />
+    <addTemplate ref="addTemplateRef" @success="reload()" />
  </PageWrapper>
-
 </template>

 <script lang="ts" name="planSummary" setup>
-//ts语法
-import {  BasicTable,  useTable ,ActionItem,TableAction} from '@/components/Table';
-import { PageWrapper } from '@/components/Page';
-import {  useModal } from '@/components/Modal';
-
-import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api';
-import detailTemplateContent from './detailTemplateContent.vue'
-import modify from './modify.vue'
-import { PerformanColumns } from './templateContent.data';
-import { getPerforman } from './templateContent.api'
-const [registerDetail, { openModal: openModalDetail }] = useModal();
-const [registerModify, { openModal: openModalModify, closeModal: closeModalModify }] = useModal();
-
+  //ts语法
+  import { BasicTable, useTable, ActionItem, TableAction } from '@/components/Table';
+  import { PageWrapper } from '@/components/Page';
+  import { useModal } from '@/components/Modal';
+  import { ref } from 'vue';
+  import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api';
+  import detailTemplateContent from './detailTemplateContent.vue';
+  import modify from './modify.vue';
+  import { PerformanColumns } from './templateContent.data';
+  import { getPerforman } from './templateContent.api';
+  import addTemplate from './addTemplate.vue';
+  const [registerDetail, { openModal: openModalDetail }] = useModal();
+  const [registerModify, { openModal: openModalModify, closeModal: closeModalModify }] = useModal();

-const [registerTable,{reload}] = useTable({
-  api: getPerforman,
-  columns: PerformanColumns,
-  useSearchForm: false,
-  pagination:false,
-  actionColumn: {
-    width: 140,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-  },
-  afterFetch: (data) => {
-  },
-  //表单查询项设置
-  // formConfig: {
-  //   schemas: searchFormSchema,
-  // }
-
-});
-function getTableAction(record): ActionItem[] {
-  return [
+  const [registerTable, { reload }] = useTable({
+    api: getPerforman,
+    columns: PerformanColumns,
+    useSearchForm: false,
+    pagination: false,
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    afterFetch: (data) => {},
+    //表单查询项设置
+    // formConfig: {
+    //   schemas: searchFormSchema,
+    // }
+  });
+  function getTableAction(record): ActionItem[] {
+    return [
      {
-          label: '详情',
-          onClick: handledetail.bind(null, record),
+        label: '详情',
+        onClick: handledetail.bind(null, record),
      },
      // {
      //     label: '修改',
@ -60,22 +62,25 @@ function getTableAction(record): ActionItem[] {
      //     },
      //     onClick: handleModify.bind(null, record),
      // },
-  ];
-}
-function handledetail(record) {
-  openModalDetail(true,{type:record.type})
-  console.log(record)
-}
-// function handleModify(record) {
-//   openModalModify(true,{type:record.type})
-//   console.log(record)
-// }
-function closeModel() {
-  closeModalModify()
-  reload()
-}
+    ];
+  }
+  function handledetail(record) {
+    openModalDetail(true, { type: record.type });
+    console.log(record);
+  }
+  // function handleModify(record) {
+  //   openModalModify(true,{type:record.type})
+  //   console.log(record)
+  // }
+  function closeModel() {
+    closeModalModify();
+    reload();
+  }
+  //新增模板
+  const addTemplateRef = ref();
+  function handleAdd() {
+    addTemplateRef.value.showModal()
+  }
 </script>

-<style scoped>
-
-</style>
+<style scoped></style>
--- a/src/views/performanceIndicator/templateContent/templateContent.api.ts
+++ b/src/views/performanceIndicator/templateContent/templateContent.api.ts
@ -5,6 +5,7 @@ export enum Api {
  importPerformancescore = '/huzhouPerformancescore/importPerformancescore',
  getPerformancescore = '/huzhouPerformancescore/getPerformancescore',
  getPerforman="/huzhouPerformancescore/getPerforman",
+  addPerformance="/huzhouPerformancescore/addPerformance",

 }

@ -15,5 +16,5 @@ export const importPerformancescore =  (params?) =>defHttp.post({ url: Api.impor

 export const getPerformancescore = (params?) => defHttp.get({ url: Api.getPerformancescore, params });
 export const getPerforman = (params?) => defHttp.get({ url: Api.getPerforman, params });
-
+export const addPerformance = (params?) => defHttp.post({ url: Api.addPerformance, headers: { 'Content-Type': 'multipart/form-data' },params });

--- a/src/views/projectLib/projectPlan/addProjectDate.vue
+++ b/src/views/projectLib/projectPlan/addProjectDate.vue
@ -1,5 +1,4 @@
 <template>
-
  <a-modal v-model:open="visible" :title="title" @ok="handleOk" @cancel="closeModal" width="50%">
      <div style="margin:20px">
    <a-form :model="form" layout="vertical" ref="formRef" :rules="rules">