From ce70f6901e2e44fa080006d5758cb9b938ac9d79 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 15 Jun 2022 18:13:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E7=AE=A1=E7=90=86-=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/archivesManage/archivesList.js        |  19 +-
 .../archivesList/archivesDetail.vue           | 174 +++++++++---------
 src/views/components/category/PreviewForm.vue |  97 +++++-----
 3 files changed, 151 insertions(+), 139 deletions(-)

diff --git a/src/api/archivesManage/archivesList.js b/src/api/archivesManage/archivesList.js
index 8c1ee60..a81db81 100644
--- a/src/api/archivesManage/archivesList.js
+++ b/src/api/archivesManage/archivesList.js
@@ -1,5 +1,6 @@
 import request from '@/utils/request'
 import qs from 'qs'
+// import { form } from '../../components/Crud/crud'
 
 export function getTableDisplayFields(params) {
   return request({
@@ -19,29 +20,19 @@ export function add(form) {
   edit(form)
 }
 
-export function edit(form) {
-  const data = {
-    id: form.id,
-    categoryId: form.categoryId
-  }
-  delete form.id
-  delete form.categoryId
-  data.jsonString = JSON.stringify(form)
+export function edit(parameter) {
   return request({
     url: 'api/archives/edit',
     method: 'post',
-    data
+    data: parameter
   })
 }
 
-export function del(ids) {
-  const data = {
-    id: ids[0]
-  }
+export function del(parameter) {
   return request({
     url: 'api/archives/delete',
     method: 'post',
-    data
+    data: parameter
   })
 }
 
diff --git a/src/views/archivesManage/archivesList/archivesDetail.vue b/src/views/archivesManage/archivesList/archivesDetail.vue
index bb63fcd..c63345a 100644
--- a/src/views/archivesManage/archivesList/archivesDetail.vue
+++ b/src/views/archivesManage/archivesList/archivesDetail.vue
@@ -15,6 +15,10 @@
         <el-checkbox v-model="fixedStatusBar">隐藏固定状态栏</el-checkbox>
       </div>
       <crudOperation :permission="permission">
+        <template v-slot:right>
+          <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
+          <el-button v-permission="permission.download" :loading="crud.downloadLoading" :disabled="!crud.data.length" size="mini" icon="el-icon-download" @click="crud.doExport">导出</el-button>
+        </template>
         <template v-slot:rightButtonGroup>
           <div class="archives-handler-btn">
             <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary">装盒</el-button>
@@ -25,42 +29,38 @@
         </template>
       </crudOperation>
     </div>
-    <!--表单组件-->
+    <!--新增 / 编辑 表单组件-->
     <el-dialog class="preview-dialog" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <PreviewForm :is-disabled="false" :this-fields="form" :form-preview-data="formPreviewData" />
+        <!-- :this-fields="form" -->
+        <PreviewForm v-if="formPreviewData.length" ref="previewForm" :is-disabled="false" :form-preview-data.sync="formPreviewData" />
         <div slot="footer" class="dialog-footer">
           <el-button type="text" @click="crud.cancelCU">取消</el-button>
-          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="handlerArchivesSubmit">确认</el-button>
         </div>
       </div>
     </el-dialog>
-    <!-- 弹框形式的内容展示 -->
-    <el-dialog class="edit-form-dialog" :visible="popoverVisible" :before-close="handleClose" :close-on-click-modal="false" title="字典列表">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <el-table ref="table" :data="tableData" highlight-current-row style="width: 100%;">
-          <el-table-column type="selection" width="55" />
-          <el-table-column prop="dicName" label="字典名称" />
-          <el-table-column prop="dicCode" label="字典代码" />
-          <el-table-column prop="dicExplain" label="内容说明" />
-        </el-table>
-      </div>
-    </el-dialog>
-    <el-dialog title="删除字典内容" :visible.sync="deleteVisible" :before-close="handleClose">
+    <!-- 删除档案 -->
+    <el-dialog title="删除档案" :visible.sync="deleteVisible" :before-close="handleClose">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <p><span style="color:#fff;">确定删除当前档案吗？</span></p>
+        <div class="dialog-delt">
+          <p><span>确定删除当前档案吗？</span></p>
+          <p v-if="selectedCategory.isType == 2">数据来源：项目 1条数据  案卷 4条数据</p>
+          <p v-if="selectedCategory.isType == 3">数据来源：案卷 1条数据  卷内 2条数据</p>
+          <p v-if="selectedCategory.isType == 4">数据来源：卷内 1条数据</p>
+          <p v-if="selectedCategory.isType == 5">数据来源：卷内 1条数据</p>
+          <p class="delt-tip"><span>提示：如果删除当前档案，此档案内所附带的文件会一并删除</span></p>
+        </div>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+          <el-button type="primary" @click.native="handleDeltConfirm">确定</el-button>
         </div>
       </div>
     </el-dialog>
-    <!--表格渲染-->
+    <!-- table表格渲染 -->
     <el-table ref="table" v-loading="crud.loading || getTableDisplayFieldsLoading" class="archives-table" :data="crud.data" highlight-current-row style="width: 100%; " height="calc(100vh - 370px)" @selection-change="crud.selectionChangeHandler" @row-click="clickRowHandler">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column type="index" label="序号" width="55" align="center" />
@@ -71,9 +71,9 @@
       </el-table-column>
       <el-table-column label="装盒" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
         <!-- state-active 已装/已入/已借/已绑 -->
-        <template slot-scope="">
+        <template slot-scope="scope">
           <!-- 未装 / 已装 -->
-          <span class="row-state row-packing state-active">已装</span>
+          <span class="row-state row-packing state-active">{{ scope.row.case_no ? '已装': '未装' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="入库" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
@@ -89,9 +89,9 @@
         </template>
       </el-table-column>
       <el-table-column label="标签" width="100" align="center" :fixed="fixedStatusBar?false:'right'">
-        <template slot-scope="">
+        <template slot-scope="scope">
           <!-- 未绑 / 已绑 -->
-          <span class="row-state row-binding">未绑</span>
+          <span class="row-state row-binding">{{ scope.row.tid ? '已绑': '未绑' }}</span>
         </template>
       </el-table-column>
     </el-table>
@@ -133,9 +133,9 @@ export default {
         optShow: {
           add: true,
           edit: true,
-          del: true,
+          del: false,
           reset: false,
-          download: true,
+          download: false,
           group: false
         },
         queryOnPresenterCreated: false,
@@ -145,17 +145,7 @@ export default {
   },
   data() {
     return {
-      // dicPid: null,
-      // needRefreshTree: false,
-      // rules: {
-      //   dicName: [
-      //     { required: true, message: '请输入字典名称', trigger: 'blur' }
-      //   ],
-      //   dicCode: [
-      //     { required: true, message: '请输入字典代码', trigger: 'blur' }
-      //   ]
-      // },
-      stateOptions: [
+      stateOptions: [ // 搜索 - 状态选择
         { key: '1', label: '全部' },
         { key: '2', label: '未装' },
         { key: '3', label: '未入' },
@@ -166,19 +156,17 @@ export default {
       permission: {
         add: ['admin', 'archivesList:add'],
         edit: ['admin', 'archivesList:edit'],
-        del: ['admin', 'archivesList:del']
+        del: ['admin', 'archivesList:del'],
+        download: ['admin', 'archivesList:download']
       },
-      fixedStatusBar: false,
-      deleteVisible: false,
-      deleteData: {},
-      tableDisplayFields: [],
-      getTableDisplayFieldsLoading: false,
-      formPreviewData: [],
-      rules: {},
-      popoverVisible: false,
-      selectData: [],
-      tableData: [],
-      defaultForm: {}
+      fixedStatusBar: false, // table-右侧fixed
+      deleteVisible: false, // 删除dialog
+      deleteData: {}, // 删除选中data
+      tableDisplayFields: [], // table-list-title字段
+      getTableDisplayFieldsLoading: false, // table-loading
+      formPreviewData: [], // 预览界面data
+      isEditOrAdd: '',
+      selectedData: null
     }
   },
   watch: {
@@ -196,6 +184,16 @@ export default {
   mounted() {
   },
   methods: {
+    // 获取数据前设置默认参数
+    // [CRUD.HOOK.beforeRefresh]() {
+    //   this.crud.query.id = this.dicPid
+    // },
+    // [CRUD.HOOK.afterRefresh](crud) {
+    //   console.log(this.curd)
+    //   // if (this.needRefreshTree) {
+    //   //   this.$emit('treeRefresh', crud.data)
+    //   // }
+    // },
     [CRUD.HOOK.beforeRefresh]() {
       this.getTableDisplayFieldsLoading = true
       // 档案列表获取显示列
@@ -205,61 +203,69 @@ export default {
         return true
       })
     },
-    // getData() {
-    [CRUD.HOOK.beforeToCU]() {
+    [CRUD.HOOK.beforeToCU](crud, form, btn) {
+      this.isEditOrAdd = btn
+      this.selectedData = crud.selections
       this.form.dictionaryConfigId = {}
       // 档案预编辑获取字段
       getFormDisplayFields({ categoryId: this.selectedCategory.id }).then(data => {
         this.formPreviewData = data.showFiled.filter((fields) => { return fields.isInput })
-        // this.formPreviewData.map(item => {
-        //   this.rules[item.fieldName] = [
-        //     {
-        //       required: item.isRequired,
-        //       message: (item.isInputClass === 'text' ? '请输入' : '请选择') + item.fieldCnName,
-        //       trigger: item.isInputClass === 'text' ? 'blur' : 'change'
-        //     }
-        //   ]
-        //   if (item.isDefaultValue) {
-        //     this.crud.defaultForm[item.fieldName] = item.isDefaultValue
-        //   } else {
-        //     this.crud.defaultForm[item.fieldName] = null
-        //   }
-        // })
         this.form.categoryId = this.selectedCategory.id
         return true
       })
     },
-    // },
-    /* 重新渲染table组件 防止table-fixed 错位 配合watch-table数据 */
-    doLayout() {
-      this.$nextTick(() => {
-        this.$refs.table.doLayout()
-      })
+    handlerArchivesSubmit() {
+      let arcId
+      if (this.isEditOrAdd === 'add') {
+        arcId = null
+      } else if (this.isEditOrAdd === 'edit') {
+        arcId = this.selectedData[0].id
+      }
+      this.$refs.previewForm.submitForm('addOrUpdateForm', this.selectedCategory.id, arcId)
     },
-    // // 获取数据前设置默认参数
-    // [CRUD.HOOK.beforeRefresh]() {
-    //   this.crud.query.id = this.dicPid
-    // },
-    // [CRUD.HOOK.afterRefresh](crud) {
-    //   if (this.needRefreshTree) {
-    //     this.$emit('treeRefresh', crud.data)
-    //   }
-    // },
+    // table - 当前选中得row
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // 选择删除
     toDelete(data) {
       this.deleteData = data
       this.deleteVisible = true
     },
-    handleConfirm() {
+    // 确认删除
+    handleDeltConfirm() {
       this.deleteVisible = false
       this.crud.delAllLoading = true
-      this.crud.doDelete(this.deleteData)
+      // this.crud.doDelete(this.deleteData)
+      const ids = []
+      this.deleteData.forEach(val => {
+        ids.push(val.id)
+      })
+      const params = {
+        'ids': ids,
+        'categoryId': this.selectedCategory.id
+      }
+      // 删除fetch
+      del(params).then(res => {
+        this.crud.delAllLoading = false
+        this.$notify({
+          title: '删除成功',
+          type: 'success',
+          duration: 2500
+        })
+        this.crud.refresh()
+      })
     },
+    // 删除 - 关闭
     handleClose(done) {
       this.deleteData = {}
       done()
     },
-    clickRowHandler(row) {
-      this.$refs.table.toggleRowSelection(row)
+    /* 重新渲染table组件 防止table-fixed 错位 配合watch-table数据 */
+    doLayout() {
+      this.$nextTick(() => {
+        this.$refs.table.doLayout()
+      })
     }
   }
 }
diff --git a/src/views/components/category/PreviewForm.vue b/src/views/components/category/PreviewForm.vue
index f7b55f7..b2058ac 100644
--- a/src/views/components/category/PreviewForm.vue
+++ b/src/views/components/category/PreviewForm.vue
@@ -6,13 +6,42 @@
           <el-col v-for="(item,index) in formPreviewData" :key="index" class="drag-item" :span="item.isLine ? 24 : 12">
             <el-form-item :label="item.fieldCnName" :prop="item.fieldName">
               <!-- select  :load-options="loadOptions"-->
-              <treeselect v-if="item.isInputClass === 'select'" v-model="addOrUpdateForm[item.fieldName]" :options="item.options" :normalizer="normalizer" placeholder="" :style="{ width: item.editLength+'px'}" :disabled="isDisabled" :validate-event="isDisabled" />
+              <treeselect
+                v-if="item.isInputClass === 'select'"
+                v-model="addOrUpdateForm[item.fieldName]"
+                :options="item.options"
+                :normalizer="normalizer"
+                placeholder=""
+                :style="{ width: item.editLength+'px'}"
+                :disabled="isDisabled"
+                :validate-event="isDisabled"
+              />
               <!-- text / number / textarea / popover -->
-              <el-input v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date'" v-model="addOrUpdateForm[item.fieldName]" :type="item.isInputClass === 'popover'? 'text' : item.isInputClass" :rows="item.isInputClass === 'textarea' ? 3 : ''" :class="{'input-popover':(item.isInputClass === 'popover')}" :style="{ width: item.editLength+'px'}" :disabled="isDisabled" :validate-event="isDisabled">
+              <el-input
+                v-if="item.isInputClass !== 'select' && item.isInputClass !== 'date'"
+                v-model="addOrUpdateForm[item.fieldName]"
+                :type="item.isInputClass === 'popover'? 'text' : item.isInputClass"
+                :rows="item.isInputClass === 'textarea' ? 3 : ''"
+                :class="{'input-popover':(item.isInputClass === 'popover')}"
+                :style="{ width: item.editLength+'px'}"
+                :disabled="isDisabled"
+                :validate-event="isDisabled"
+              >
                 <i v-if="item.isInputClass === 'popover'" slot="suffix" class="el-input__icon iconfont icon-weibiaoti-2" @click="popoverVisible = true" />
               </el-input>
               <!-- date -->
-              <el-date-picker v-if="item.isInputClass === 'date'" v-model="addOrUpdateForm[item.fieldName]" type="date" align="right" format="yyyy-MM-dd" placeholder="" :clearable="false" :style="{ width: item.editLength+'px'}" :disabled="isDisabled" :validate-event="isDisabled" />
+              <el-date-picker
+                v-if="item.isInputClass === 'date'"
+                v-model="addOrUpdateForm[item.fieldName]"
+                type="date"
+                align="right"
+                format="yyyy-MM-dd"
+                placeholder=""
+                :clearable="false"
+                :style="{ width: item.editLength+'px'}"
+                :disabled="isDisabled"
+                :validate-event="isDisabled"
+              />
             </el-form-item>
           </el-col>
         </draggable>
@@ -37,7 +66,8 @@
 
 <script>
 // import formPreviewData from './data.json'
-// import CRUD from '@crud/crud'
+import { form } from '@crud/crud'
+import { edit } from '@/api/archivesManage/archivesList'
 import draggable from 'vuedraggable'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@@ -45,6 +75,9 @@ import { FetchFindAllSubsetById } from '@/api/archivesConfig/dictDetail'
 export default {
   name: 'PreviewForm',
   components: { draggable, Treeselect },
+  mixins: [
+    form({})
+  ],
   props: {
     isDisabled: {
       type: Boolean,
@@ -57,8 +90,6 @@ export default {
   },
   data() {
     return {
-      // formPreviewData: [],
-      formData: [],
       addOrUpdateForm: {},
       rules: {},
       tableData: [],
@@ -75,18 +106,9 @@ export default {
       }
     }
   },
-  watch: {
-    formPreviewData: function(newValue, oldValue) {
-      // console.log(newValue)
-      // this.formData = newValue
-      if (newValue) {
-        this.editFormRow()
-        this.getAllSubset()
-      }
-    }
-  },
   mounted() {
     this.getAllSubset()
+    this.editFormRow()
   },
   methods: {
     // 获取对应字典子集数据
@@ -104,26 +126,6 @@ export default {
         }
       })
     },
-    // 获取弹窗内部门数据
-    // loadOptions({ action, parentNode, callback }) {
-    //   if (action === LOAD_CHILDREN_OPTIONS) {
-    //     this.formPreviewData.map(item => {
-    //       if (item.dictionaryConfigId) {
-    //         FetchFindAllSubsetById({ id: item.dictionaryConfigId.id }).then(res => {
-    //           parentNode.children = res.map(function(obj) {
-    //             if (obj.hasChildren) {
-    //               obj.children = null
-    //             }
-    //             return obj
-    //           })
-    //           setTimeout(() => {
-    //             callback()
-    //           }, 100)
-    //         })
-    //       }
-    //     })
-    //   }
-    // },
     // popover - table 单选
     clickRowHandler(row) {
       this.$refs.table.clearSelection()
@@ -141,9 +143,10 @@ export default {
       })
     },
     // 动态生成表单
-    editFormRow(row) {
+    editFormRow() {
       this.rules = {}
       this.formPreviewData.map(item => {
+        this.$set(this.addOrUpdateForm, item.fieldName, '')
         this.rules[item.fieldName] = [
           {
             required: !!item.isRequired,
@@ -152,7 +155,6 @@ export default {
           }
         ]
       })
-      this.addOrUpdateForm = Object.assign({}, row)
     },
     // 预览界面排序
     datadragEnd(evt) {
@@ -165,10 +167,23 @@ export default {
       // console.log('获取拖拽改变数据索引后，被拖拽的元素 :' +
       //           this.formPreviewData[evt.newIndex])
     },
-    submitForm(formName) {
+    submitForm(formName, categoryId, arcId) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          alert('submit!')
+          const params = {
+            'id': arcId,
+            'categoryId': categoryId,
+            'jsonString': JSON.stringify(this.addOrUpdateForm)
+          }
+          edit(params).then(res => {
+            this.$notify({
+              title: res,
+              type: 'success',
+              duration: 2500
+            })
+            console.log(this.crud.state)
+            this.crud.refresh()
+          })
         } else {
           console.log('error submit!!')
           return false
@@ -184,7 +199,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .preview-content {
-  width: 840px !important;
+  width: 640px !important;
   min-height: calc(100vh - 312px);
   padding: 20px 15px 20px 0 !important;
   margin-top: 0 !important;