优化修改资产单据页面

ruoyi-ui/package.json

@@ -75,6 +75,8 @@
     "runjs": "4.4.2",
     "sass": "1.32.13",
     "sass-loader": "10.1.1",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
     "vue-template-compiler": "2.6.12"

ruoyi-ui/src/components/asset/assetCard.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="container">
+    <el-descriptions :title="title" v-if="assetInfo" :column="column" :border="border">
+      <el-descriptions-item label="资产ID" v-if="assetInfo.id">{{assetInfo.id}}</el-descriptions-item>
+      <el-descriptions-item label="资产名称" v-if="assetInfo.name">{{assetInfo.name}}</el-descriptions-item>
+      <el-descriptions-item label="资产条码" v-if="assetInfo.code">{{assetInfo.code}}</el-descriptions-item>
+      <el-descriptions-item label="资产编号" v-if="assetInfo.number">{{assetInfo.number}}</el-descriptions-item>
+      <el-descriptions-item label="资产分类" v-if="assetInfo.categoryNumber">{{assetInfo.categoryNumber}}</el-descriptions-item>
+      <el-descriptions-item label="规格型号" v-if="assetInfo.specificationsModel">{{assetInfo.specificationsModel}}</el-descriptions-item>
+      <el-descriptions-item label="ABC分类" v-if="assetInfo.abcCategory">{{assetInfo.abcCategory}}</el-descriptions-item>
+      <el-descriptions-item label="管理状态" v-if="assetInfo.manageStatus">{{assetInfo.manageStatus}}</el-descriptions-item>
+      <el-descriptions-item label="使用部门" v-if="assetInfo.userDepartment">{{assetInfo.userDepartment}}</el-descriptions-item>
+      <el-descriptions-item label="管理部门" v-if="assetInfo.department">{{assetInfo.department}}</el-descriptions-item>
+      <el-descriptions-item label="责任人" v-if="assetInfo.responsiblePerson">{{assetInfo.responsiblePerson}}</el-descriptions-item>
+      <el-descriptions-item label="所在位置编号" v-if="assetInfo.locationNumber">{{assetInfo.locationNumber}}</el-descriptions-item>
+      <el-descriptions-item label="资产性质" v-if="assetInfo.property">{{assetInfo.property}}</el-descriptions-item>
+      <el-descriptions-item label="购置日期" v-if="assetInfo.purchaseDate">{{assetInfo.purchaseDate}}</el-descriptions-item>
+      <el-descriptions-item label="启用日期" v-if="assetInfo.commissioningDate">{{assetInfo.commissioningDate}}</el-descriptions-item>
+      <el-descriptions-item label="资产原值（元）" v-if="assetInfo.originalValue">{{assetInfo.originalValue}}</el-descriptions-item>
+      <el-descriptions-item label="使用年限" v-if="assetInfo.durableYears">{{assetInfo.durableYears}}</el-descriptions-item>
+      <el-descriptions-item label="资产净值（元）" v-if="assetInfo.netValue">{{assetInfo.netValue}}</el-descriptions-item>
+      <el-descriptions-item label="资产残值（元）" v-if="assetInfo.residualValue">{{assetInfo.residualValue}}</el-descriptions-item>
+      <el-descriptions-item label="累计折旧（元）" v-if="assetInfo.accumulatedDepreciation">{{assetInfo.accumulatedDepreciation}}</el-descriptions-item>
+      <el-descriptions-item label="最近折旧日期" v-if="assetInfo.lastDepreciationDate">{{assetInfo.lastDepreciationDate}}</el-descriptions-item>
+      <el-descriptions-item label="折旧方式" v-if="assetInfo.depreciationMethod">{{assetInfo.depreciationMethod}}</el-descriptions-item>
+      <el-descriptions-item label="合同编号" v-if="assetInfo.contractNumber">{{assetInfo.contractNumber}}</el-descriptions-item>
+      <el-descriptions-item label="出厂编号" v-if="assetInfo.factoryNumber">{{assetInfo.factoryNumber}}</el-descriptions-item>
+      <el-descriptions-item label="制造商" v-if="assetInfo.manufacturer">{{assetInfo.manufacturer}}</el-descriptions-item>
+      <el-descriptions-item label="供应商" v-if="assetInfo.supplier">{{assetInfo.supplier}}</el-descriptions-item>
+      <el-descriptions-item label="资产用途" v-if="assetInfo.purpose">{{assetInfo.purpose}}</el-descriptions-item>
+      <el-descriptions-item label="维保到期日期" v-if="assetInfo.maintenanceDate">{{assetInfo.maintenanceDate}}</el-descriptions-item>
+      <el-descriptions-item label="维修电话" v-if="assetInfo.maintenanceTel">{{assetInfo.maintenanceTel}}</el-descriptions-item>
+      <el-descriptions-item label="维修人员" v-if="assetInfo.maintenanceUser">{{assetInfo.maintenanceUser}}</el-descriptions-item>
+      <el-descriptions-item label="所属公司" v-if="assetInfo.corporation">{{assetInfo.corporation}}</el-descriptions-item>
+      <el-descriptions-item label="记录状态" v-if="assetInfo.recordStatus">{{assetInfo.recordStatus}}</el-descriptions-item>
+      <el-descriptions-item label="是否白名单" v-if="assetInfo.reservedColumnA">{{assetInfo.isWhitelist}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段B" v-if="assetInfo.reservedColumnB">{{assetInfo.reservedColumnB}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段C" v-if="assetInfo.reservedColumnC">{{assetInfo.reservedColumnC}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段D" v-if="assetInfo.reservedColumnD">{{assetInfo.reservedColumnD}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段E" v-if="assetInfo.reservedColumnE">{{assetInfo.reservedColumnE}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段F" v-if="assetInfo.reservedColumnF">{{assetInfo.reservedColumnF}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段G" v-if="assetInfo.reservedColumnG">{{assetInfo.reservedColumnG}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段H" v-if="assetInfo.reservedColumnH">{{assetInfo.reservedColumnH}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段I" v-if="assetInfo.reservedColumnI">{{assetInfo.reservedColumnI}}</el-descriptions-item>
+      <el-descriptions-item label="预留字段J" v-if="assetInfo.reservedColumnJ">{{assetInfo.reservedColumnJ}}</el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AssetCard',
+  props: {
+    title: {
+      type: String,
+      default: '资产信息'
+    },
+    column: {
+      type: Number,
+      default: 3
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    assetInfo: {
+      type: Object,
+      default: {
+        /** 资产ID */
+        id: null,
+        /** 资产条码 */
+        code: null,
+        /** 资产名称 */
+        name: null,
+        /** 资产编号 */
+        number: null,
+        /** 图片路径 */
+        imageUrl: null,
+        /** 资产分类编号 */
+        categoryNumber: null,
+        /** 规格型号 */
+        specificationsModel: null,
+        /** ABC分类 */
+        abcCategory: null,
+        /** 管理状态，0：闲置 */
+        manageStatus: null,
+        /** 使用部门 */
+        userDepartment: null,
+        /** 管理部门 */
+        department: null,
+        /** 责任人 */
+        responsiblePerson: null,
+        /** 所在位置编号 */
+        locationNumber: null,
+        /** 资产性质 */
+        property: null,
+        /** 购置日期 */
+        purchase: null,
+        /** 启用日期 */
+        commissioning: null,
+        /** 原值（元） */
+        originalValue: null,
+        /** 使用年限 */
+        durableYears: null,
+        /** 净值（元） */
+        netValue: null,
+        /** 残值（元） */
+        residualValue: null,
+        /** 累计折旧（元） */
+        accumulatedDepreciation: null,
+        /** 最近折旧日期 */
+        lastDepreciation: null,
+        /** 折旧方式，0：其他 */
+        depreciationMethod: null,
+        /** 合同编号 */
+        contractNumber: null,
+        /** 出厂编号 */
+        factoryNumber: null,
+        /** 制造商 */
+        manufacturer: null,
+        /** 供应商 */
+        supplier: null,
+        /** 资产用途 */
+        purpose: null,
+        /** 维保到期日期 */
+        maintenance: null,
+        /** 维修电话 */
+        maintenanceTel: null,
+        /** 维修人员 */
+        maintenanceUser: null,
+        /** 所属公司 */
+        corporation: null,
+        /** 记录状态，0：未提交，1：已提交 */
+        recordStatus: null,
+        /** 是否白名单 */
+        isWhitelist: null,
+        /** 预留字段b */
+        reservedColumnB: null,
+        /** 预留字段c */
+        reservedColumnC: null,
+        /** 预留字段d */
+        reservedColumnD: null,
+        /** 预留字段e */
+        reservedColumnE: null,
+        /** 预留字段f */
+        reservedColumnF: null,
+        /** 预留字段g */
+        reservedColumnG: null,
+        /** 预留字段h */
+        reservedColumnH: null,
+        /** 预留字段i */
+        reservedColumnI: null,
+        /** 预留字段j */
+        reservedColumnJ: null
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

ruoyi-ui/src/views/order/order/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="140px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="140px" class="queryForm">
       <el-form-item label="单据类型" prop="orderType">
         <el-select v-model="queryParams.orderType" placeholder="请选择单据类型" @change="onQueryTypeChange">
           <el-option
@@ -28,12 +28,12 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item label="申请部门" prop="applicationDepartment">
-        <el-input
+        <treeselect
           v-model="queryParams.applicationDepartment"
-          placeholder="请输入申请部门"
-          clearable
+          :options="deptOptions"
+          placeholder="请选择申请部门"
           @keyup.enter.native="handleQuery"
-        />
+        />         
       </el-form-item>
       <el-form-item v-if="queryParams.orderType === '1'" label="【调整】资产编号" prop="adjustmentAssetNumber">
         <el-input
@@ -44,12 +44,12 @@
         />
       </el-form-item>
       <el-form-item v-if="queryParams.orderType === '2'" label="【调拨】调出部门" prop="allocationCallOutDepartment">
-        <el-input
+        <treeselect
           v-model="queryParams.allocationCallOutDepartment"
-          placeholder="请输入【调拨】调出部门"
-          clearable
+          :options="deptOptions"
+          placeholder="请选择【调拨】调出部门"
           @keyup.enter.native="handleQuery"
-        />
+        />   
       </el-form-item>
       <el-form-item v-if="queryParams.orderType === '2'" label="【调拨】调出经办人" prop="allocationCallOutBy">
         <el-input
@@ -68,12 +68,12 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item v-if="queryParams.orderType === '2'" label="【调拨】调入部门" prop="allocationCallInDepartment">
-        <el-input
+        <treeselect
           v-model="queryParams.allocationCallInDepartment"
-          placeholder="请输入【调拨】调入部门"
-          clearable
+          :options="deptOptions"
+          placeholder="请选择【调拨】调入部门"
           @keyup.enter.native="handleQuery"
-        />
+        />   
       </el-form-item>
       <el-form-item v-if="queryParams.orderType === '2'" label="【调拨】调入经办人" prop="allocationCallInBy">
         <el-input
@@ -92,12 +92,12 @@
         </el-date-picker>
       </el-form-item>
       <el-form-item v-if="queryParams.orderType === '3'" label="【借出】借出部门" prop="lendDepartment">
-        <el-input
+        <treeselect
           v-model="queryParams.lendDepartment"
-          placeholder="请输入【借出】借出部门"
-          clearable
+          :options="deptOptions"
+          placeholder="请选择【借出】借出部门"
           @keyup.enter.native="handleQuery"
-        />
+        />   
       </el-form-item>
       <el-form-item v-if="queryParams.orderType === '3'" label="【借出】经手人" prop="lendBySponsor">
         <el-input
@@ -115,14 +115,14 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="原因说明" prop="reason">
+      <!-- <el-form-item label="原因说明" prop="reason">
         <el-input
           v-model="queryParams.reason"
           placeholder="请输入原因说明"
           clearable
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="制单人" prop="preparedBy">
         <el-input
           v-model="queryParams.preparedBy"
@@ -132,20 +132,20 @@
         />
       </el-form-item>
       <el-form-item label="制单部门" prop="preparedDepartment">
-        <el-input
+        <treeselect
           v-model="queryParams.preparedDepartment"
-          placeholder="请输入制单部门"
-          clearable
+          :options="deptOptions"
+          placeholder="请选择制单部门"
           @keyup.enter.native="handleQuery"
-        />
+        />   
       </el-form-item>
       <el-form-item label="所属公司" prop="corporation">
-        <el-input
+        <treeselect
           v-model="queryParams.corporation"
-          placeholder="请输入所属公司"
-          clearable
+          :options="deptOptions"
+          placeholder="请选择所属公司"
           @keyup.enter.native="handleQuery"
-        />
+        />  
       </el-form-item>
       <el-form-item label="记录状态" prop="recordStatus">
         <el-select v-model="queryParams.recordStatus" placeholder="请选择记录状态" clearable>
@@ -324,7 +324,12 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item label="申请部门" prop="applicationDepartment">
-          <el-input v-model="form.applicationDepartment" placeholder="请输入申请部门" />
+          <treeselect
+            v-model="form.applicationDepartment"
+            :options="deptOptions"
+            placeholder="请选择申请部门"
+            @keyup.enter.native="handleQuery"
+          />  
         </el-form-item>
         <el-form-item v-if="form.orderType === 1" label="【调整】资产编号" prop="adjustmentAssetNumber">
           <el-input v-model="form.adjustmentAssetNumber" placeholder="请输入【调整】资产编号" />
@@ -333,7 +338,12 @@
           <el-input v-model="form.adjustmentOriginalAssetInfo" type="textarea" placeholder="系统自动补充" disabled/>
         </el-form-item>
         <el-form-item v-if="form.orderType === 2" label="【调拨】调出部门" prop="allocationCallOutDepartment">
-          <el-input v-model="form.allocationCallOutDepartment" placeholder="请输入【调拨】调出部门" />
+          <treeselect
+            v-model="form.allocationCallOutDepartment"
+            :options="deptOptions"
+            placeholder="请选择【调拨】调出部门"
+            @keyup.enter.native="handleQuery"
+          />  
         </el-form-item>
         <el-form-item v-if="form.orderType === 2" label="【调拨】调出经办人" prop="allocationCallOutBy">
           <el-input v-model="form.allocationCallOutBy" placeholder="请输入【调拨】调出经办人" />
@@ -347,7 +357,12 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item v-if="form.orderType === 2" label="【调拨】调入部门" prop="allocationCallInDepartment">
-          <el-input v-model="form.allocationCallInDepartment" placeholder="请输入【调拨】调入部门" />
+          <treeselect
+            v-model="form.allocationCallInDepartment"
+            :options="deptOptions"
+            placeholder="请选择【调拨】调入部门"
+            @keyup.enter.native="handleQuery"
+          /> 
         </el-form-item>
         <el-form-item v-if="form.orderType === 2" label="【调拨】调入经办人" prop="allocationCallInBy">
           <el-input v-model="form.allocationCallInBy" placeholder="请输入【调拨】调入经办人" />
@@ -367,7 +382,12 @@
           <el-input v-model="form.allocationNewLocationNumber" placeholder="请输入【调拨】新功能位置编号" />
         </el-form-item>
         <el-form-item v-if="form.orderType === 3" label="【借出】借出部门" prop="lendDepartment">
-          <el-input v-model="form.lendDepartment" placeholder="请输入【借出】借出部门" />
+          <treeselect
+            v-model="form.lendDepartment"
+            :options="deptOptions"
+            placeholder="请选择【借出】借出部门"
+            @keyup.enter.native="handleQuery"
+          /> 
         </el-form-item>
         <el-form-item v-if="form.orderType === 3" label="【借出】经手人" prop="lendBySponsor">
           <el-input v-model="form.lendBySponsor" placeholder="请输入【借出】经手人" />
@@ -414,12 +434,15 @@
 
 <script>
 import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/order/order";
-
+import { deptTreeSelect } from "@/api/system/user";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   name: "Order",
   dicts: ['asset_order_type', 'asset_record_status'],
   components: {
-    AssetInfo: () => import('@/components/asset/assetCard.vue')
+    AssetInfo: () => import('@/components/asset/assetCard.vue'),
+    Treeselect,
   },
   data() {
     return {
@@ -441,6 +464,8 @@ export default {
       // 资产原信息
       openAdjustment: false,
       adjustmentOriginalAssetInfo: null,
+      // 部门树选项
+      deptOptions: undefined,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -503,6 +528,7 @@ export default {
   },
   created() {
     this.orderType = 1
+    this.getDeptTree()
     this.getList();
   },
   methods: {
@@ -515,6 +541,12 @@ export default {
         this.loading = false;
       });
     },
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.deptOptions = response.data;
+      });
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -672,3 +704,15 @@ export default {
   }
 };
 </script>
+
+<style lang="less" scoped>
+/deep/ .vue-treeselect{
+  display:inline-block;
+}
+.queryForm{
+  /deep/ .vue-treeselect{
+    width: 205px;
+    height: 32px;
+  }
+}
+</style>