营房管理页面修改

src/views/materialManagement/archives/index.vue

@@ -1,9 +1,20 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="物品类型" prop="wuPinType">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <!-- <el-form-item label="物品类型" prop="wuPinType">
         <el-select v-model="queryParams.wuPinType" placeholder="请选择物品类型" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option
+            v-for="dict in dict.type.category"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="物品名称" prop="name">
@@ -35,28 +46,35 @@
       </el-form-item>
       <el-form-item label="营具类型" prop="yingJuType">
         <el-select v-model="queryParams.yingJuType" placeholder="请选择营具类型" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+          <el-option
+            v-for="dict in dict.type.camp_equipment"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
-      </el-form-item>
-      <el-form-item label="责任单位" prop="responsibilityUnit">
-        <el-input
+      </el-form-item> -->
+      <el-form-item label="" prop="responsibilityUnit">
+        <el-select
           v-model="queryParams.responsibilityUnit"
-          placeholder="请输入责任单位"
+          placeholder="请选择责任单位"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
       </el-form-item>
-      <el-form-item label="责任人" prop="personLiable">
-        <el-input
+      <el-form-item label="" prop="personLiable">
+        <el-select
           v-model="queryParams.personLiable"
-          placeholder="请输入责任人"
+          placeholder="请选择责任人"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
       </el-form-item>
-      <el-form-item label="总数量" prop="materialTotal">
+      <!-- <el-form-item label="总数量" prop="materialTotal">
         <el-input
           v-model="queryParams.materialTotal"
           placeholder="请输入总数量"
@@ -118,10 +136,12 @@
           size="small"
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="btn" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button size="btr" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -134,7 +154,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['materialManagement:archives:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -145,7 +166,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['materialManagement:archives:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -156,7 +178,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['materialManagement:archives:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -167,50 +190,89 @@
           :loading="exportLoading"
           @click="handleExport"
           v-hasPermi="['materialManagement:archives:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <!-- <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar> -->
     </el-row>
 
-    <el-table v-loading="loading" :data="archivesList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="archivesList"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="{ background: '#003C69', color: 'white' }"
+    >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键id" align="center" prop="id" />
-      <el-table-column label="物品类型" align="center" prop="wuPinType" />
+      <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
+      <el-table-column label="物品类型" align="center" prop="wuPinType">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.category"
+            :value="scope.row.wuPinType"
+          />
+        </template>
+      </el-table-column>
       <el-table-column label="物品名称" align="center" prop="name" />
-      <el-table-column label="物资规格" align="center" prop="materialSpecification" />
+      <el-table-column
+        label="物资规格"
+        align="center"
+        prop="materialSpecification"
+      />
       <el-table-column label="物资型号" align="center" prop="materialXh" />
-      <el-table-column label="营具类型" align="center" prop="yingJuType" />
-      <el-table-column label="责任单位" align="center" prop="responsibilityUnit" />
+      <el-table-column label="营具类型" align="center" prop="yingJuType">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.camp_equipment"
+            :value="scope.row.yingJuType"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="责任单位"
+        align="center"
+        prop="responsibilityUnit"
+      />
       <el-table-column label="责任人" align="center" prop="personLiable" />
-      <el-table-column label="总数量" align="center" prop="materialTotal" />
-      <el-table-column label="库存数量" align="center" prop="materialInventory" />
+      <!-- <el-table-column label="总数量" align="center" prop="materialTotal" />
+      <el-table-column
+        label="库存数量"
+        align="center"
+        prop="materialInventory"
+      />
       <el-table-column label="在用数量" align="center" prop="inUseTotal" />
       <el-table-column label="创建人" align="center" prop="createName" />
       <el-table-column label="库房" align="center" prop="warehouse" />
       <el-table-column label="单位id" align="center" prop="unitId" />
-      <el-table-column label="责任人id" align="center" prop="personLiableId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="责任人id" align="center" prop="personLiableId" /> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-edit"
+            type="btu"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['materialManagement:archives:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
-            type="text"
-            icon="el-icon-delete"
+            type="btd"
             @click="handleDelete(scope.row)"
             v-hasPermi="['materialManagement:archives:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -218,38 +280,74 @@
     />
 
     <!-- 添加或修改物资档案对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="物品类型" prop="wuPinType">
-          <el-select v-model="form.wuPinType" placeholder="请选择物品类型">
-            <el-option label="请选择字典生成" value="" />
-          </el-select>
-        </el-form-item>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+        :inline="true"
+      >
+        
         <el-form-item label="物品名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入物品名称" />
         </el-form-item>
+        <el-form-item label="类别" prop="wuPinType">
+          <el-select v-model="form.wuPinType" placeholder="请选择类别">
+            <el-option
+              v-for="dict in dict.type.category"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="物资规格" prop="materialSpecification">
-          <el-input v-model="form.materialSpecification" placeholder="请输入物资规格" />
+          <el-input
+            v-model="form.materialSpecification"
+            placeholder="请输入物资规格"
+          />
         </el-form-item>
         <el-form-item label="物资型号" prop="materialXh">
           <el-input v-model="form.materialXh" placeholder="请输入物资型号" />
         </el-form-item>
         <el-form-item label="营具类型" prop="yingJuType">
           <el-select v-model="form.yingJuType" placeholder="请选择营具类型">
-            <el-option label="请选择字典生成" value="" />
+            <el-option
+              v-for="dict in dict.type.camp_equipment"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="责任单位" prop="responsibilityUnit">
-          <el-input v-model="form.responsibilityUnit" placeholder="请输入责任单位" />
+          <el-select
+            v-model="form.responsibilityUnit"
+            placeholder="请选择责任单位"
+          >
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
         </el-form-item>
         <el-form-item label="责任人" prop="personLiable">
-          <el-input v-model="form.personLiable" placeholder="请输入责任人" />
+          <el-select v-model="form.personLiable" placeholder="请选择责任人">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
         </el-form-item>
-        <el-form-item label="总数量" prop="materialTotal">
+        <!-- <el-form-item label="总数量" prop="materialTotal">
           <el-input v-model="form.materialTotal" placeholder="请输入总数量" />
         </el-form-item>
         <el-form-item label="库存数量" prop="materialInventory">
-          <el-input v-model="form.materialInventory" placeholder="请输入库存数量" />
+          <el-input
+            v-model="form.materialInventory"
+            placeholder="请输入库存数量"
+          />
         </el-form-item>
         <el-form-item label="在用数量" prop="inUseTotal">
           <el-input v-model="form.inUseTotal" placeholder="请输入在用数量" />
@@ -264,8 +362,11 @@
           <el-input v-model="form.unitId" placeholder="请输入单位id" />
         </el-form-item>
         <el-form-item label="责任人id" prop="personLiableId">
-          <el-input v-model="form.personLiableId" placeholder="请输入责任人id" />
-        </el-form-item>
+          <el-input
+            v-model="form.personLiableId"
+            placeholder="请输入责任人id"
+          />
+        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -276,10 +377,18 @@
 </template>
 
 <script>
-import { listArchives, getArchives, delArchives, addArchives, updateArchives, exportArchives } from "@/api/materialManagement/archives";
+import {
+  listArchives,
+  getArchives,
+  delArchives,
+  addArchives,
+  updateArchives,
+  exportArchives,
+} from "@/api/materialManagement/archives";
 
 export default {
   name: "Archives",
+  dicts: ["category", "camp_equipment"],
   data() {
     return {
       // 遮罩层
@@ -319,13 +428,12 @@ export default {
         createName: null,
         warehouse: null,
         unitId: null,
-        personLiableId: null
+        personLiableId: null,
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      }
+      rules: {},
     };
   },
   created() {
@@ -335,7 +443,7 @@ export default {
     /** 查询物资档案列表 */
     getList() {
       this.loading = true;
-      listArchives(this.queryParams).then(response => {
+      listArchives(this.queryParams).then((response) => {
         this.archivesList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -364,7 +472,7 @@ export default {
         createTime: null,
         warehouse: null,
         unitId: null,
-        personLiableId: null
+        personLiableId: null,
       };
       this.resetForm("form");
     },
@@ -380,9 +488,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -393,8 +501,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getArchives(id).then(response => {
+      const id = row.id || this.ids;
+      getArchives(id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改物资档案";
@@ -402,16 +510,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updateArchives(this.form).then(response => {
+            updateArchives(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addArchives(this.form).then(response => {
+            addArchives(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -423,24 +531,86 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除物资档案编号为"' + ids + '"的数据项？').then(function() {
-        return delArchives(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除物资档案编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delArchives(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有物资档案数据项？').then(() => {
-        this.exportLoading = true;
-        return exportArchives(queryParams);
-      }).then(response => {
-        this.$download.name(response.msg);
-        this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
+      this.$modal
+        .confirm("是否确认导出所有物资档案数据项？")
+        .then(() => {
+          this.exportLoading = true;
+          return exportArchives(queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          this.exportLoading = false;
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>
+<style scoped>
+/* 对话框背景颜色 */
+::v-deep .el-dialog {
+  width: 1016px !important;
+  background: #004d86 !important;
+}
+::v-deep .el-textarea__inner {
+  width: 965px;
+  height: 104px;
+}
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #718a9d;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+  font: 18px;
+}
+::v-deep .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+::v-deep .el-form-item__label {
+  font: 16px;
+  color: #fff;
+  width: 100px !important;
+}
+::v-deep .el-input__inner {
+  width: 200px !important;
+  height: 36px;
+  background: transparent;
+  color: #fff;
+  border: 1px solid white !important;
+  border-color: #fff !important;
+}
+/* 单位框背景颜色 */
+::v-deep .vue-treeselect__control {
+  background: #004d86 !important;
+}
+/*调整表单间距 */
+::v-deep .el-form-item__content {
+  width: 200px;
+}
+::v-deep .el-dialog__footer {
+  margin-right: 6px !important;
+}
+.contents {
+  padding: 0px 40px !important;
+}
+::v-deep .el-form-item__label {
+  width: 115px !important;
+}
+::v-deep .el-dialog__body {
+  padding: 30px 0px 30px 26px !important;
+}
+</style>

src/views/materialManagement/distribution/index.vue

@@ -1,19 +1,36 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="物品类型" prop="wuPinType">
-        <el-select v-model="queryParams.wuPinType" placeholder="请选择物品类型" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <!-- <el-form-item label="物品类型" prop="wuPinType">
+        <el-select
+          v-model="queryParams.wuPinType"
+          placeholder="请选择物品类型"
+          clearable
+          size="small"
+        >
+          <el-option
+            v-for="dict in dict.type.category"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="物品名称" prop="name">
-        <el-input
+        <el-select
           v-model="queryParams.name"
-          placeholder="请输入物品名称"
+          placeholder="请选择物品名称"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
       </el-form-item>
       <el-form-item label="物资规格" prop="materialSpecification">
         <el-input
@@ -34,11 +51,21 @@
         />
       </el-form-item>
       <el-form-item label="营具类型" prop="yingJuType">
-        <el-select v-model="queryParams.yingJuType" placeholder="请选择营具类型" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+        <el-select
+          v-model="queryParams.yingJuType"
+          placeholder="请选择营具类型"
+          clearable
+          size="small"
+        >
+          <el-option
+            v-for="dict in dict.type.camp_equipment"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
-      </el-form-item>
-      <el-form-item label="责任单位" prop="responsibilityUnit">
+      </el-form-item> -->
+      <el-form-item label="" prop="responsibilityUnit">
         <el-input
           v-model="queryParams.responsibilityUnit"
           placeholder="请输入责任单位"
@@ -47,7 +74,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="责任人" prop="personLiable">
+      <el-form-item label="" prop="personLiable">
         <el-input
           v-model="queryParams.personLiable"
           placeholder="请输入责任人"
@@ -56,7 +83,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="出库数量" prop="putOut">
+      <!-- <el-form-item label="出库数量" prop="putOut">
         <el-input
           v-model="queryParams.putOut"
           placeholder="请输入出库数量"
@@ -75,11 +102,14 @@
         />
       </el-form-item>
       <el-form-item label="发放时间" prop="putOutTime">
-        <el-date-picker clearable size="small"
+        <el-date-picker
+          clearable
+          size="small"
           v-model="queryParams.putOutTime"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="选择发放时间">
+          placeholder="选择发放时间"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="存放位置" prop="storageLocation">
@@ -92,11 +122,14 @@
         />
       </el-form-item>
       <el-form-item label="购买时间" prop="buyingTime">
-        <el-date-picker clearable size="small"
+        <el-date-picker
+          clearable
+          size="small"
           v-model="queryParams.buyingTime"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="选择购买时间">
+          placeholder="选择购买时间"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="价值" prop="price">
@@ -109,13 +142,19 @@
         />
       </el-form-item>
       <el-form-item label="库房" prop="warehouse">
-        <el-input
+        <el-select
           v-model="queryParams.warehouse"
-          placeholder="请输入库房"
+          placeholder="请选择库房"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option
+            v-for="dict in dict.type.storage_room"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="档案id" prop="archivesId">
         <el-input
@@ -136,31 +175,39 @@
         />
       </el-form-item>
       <el-form-item label="发放单位" prop="outUnit">
-        <el-input
+        <el-select
           v-model="queryParams.outUnit"
-          placeholder="请输入发放单位"
+          placeholder="请选择发放单位"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
       </el-form-item>
       <el-form-item label="发放对象" prop="outPeople">
-        <el-input
+        <el-select
           v-model="queryParams.outPeople"
-          placeholder="请输入发放对象"
+          placeholder="请选择发放对象"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option
+            v-for="dict in dict.type.distribution_object"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="接收人" prop="recipient">
-        <el-input
+        <el-select
           v-model="queryParams.recipient"
-          placeholder="请输入接收人"
+          placeholder="请选择接收人"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
       </el-form-item>
       <el-form-item label="入库表id" prop="registrationId">
         <el-input
@@ -170,10 +217,12 @@
           size="small"
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="btn" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button size="btr" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -186,7 +235,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['materialManagement:distribution:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -197,7 +247,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['materialManagement:distribution:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -208,7 +259,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['materialManagement:distribution:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -219,44 +271,103 @@
           :loading="exportLoading"
           @click="handleExport"
           v-hasPermi="['materialManagement:distribution:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <!-- <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar> -->
     </el-row>
 
-    <el-table v-loading="loading" :data="distributionList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="distributionList"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="{ background: '#003C69', color: 'white' }"
+    >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键id" align="center" prop="id" />
-      <el-table-column label="物品类型" align="center" prop="wuPinType" />
+      <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
+      <el-table-column label="物品类别" align="center" prop="wuPinType">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.category"
+            :value="scope.row.wuPinType"
+          />
+        </template>
+      </el-table-column>
       <el-table-column label="物品名称" align="center" prop="name" />
-      <el-table-column label="物资规格" align="center" prop="materialSpecification" />
+      <el-table-column
+        label="物资规格"
+        align="center"
+        prop="materialSpecification"
+      />
       <el-table-column label="物资型号" align="center" prop="materialXh" />
-      <el-table-column label="营具类型" align="center" prop="yingJuType" />
-      <el-table-column label="责任单位" align="center" prop="responsibilityUnit" />
-      <el-table-column label="责任人" align="center" prop="personLiable" />
+      <el-table-column label="营具类型" align="center" prop="yingJuType">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.camp_equipment"
+            :value="scope.row.yingJuType"
+          />
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        label="责任单位"
+        align="center"
+        prop="responsibilityUnit"
+      /> -->
+      <!-- <el-table-column label="责任人" align="center" prop="personLiable" /> -->
       <el-table-column label="出库数量" align="center" prop="putOut" />
-      <el-table-column label="创建人" align="center" prop="createName" />
-      <el-table-column label="发放时间" align="center" prop="putOutTime" width="180">
+      <!-- <el-table-column label="创建人" align="center" prop="createName" /> -->
+      <el-table-column
+        label="发放时间"
+        align="center"
+        prop="putOutTime"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.putOutTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.putOutTime, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
       <el-table-column label="存放位置" align="center" prop="storageLocation" />
-      <el-table-column label="购买时间" align="center" prop="buyingTime" width="180">
+      <!-- <el-table-column
+        label="购买时间"
+        align="center"
+        prop="buyingTime"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.buyingTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.buyingTime, "{y}-{m}-{d}") }}</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column label="价值" align="center" prop="price" />
       <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="库房" align="center" prop="warehouse" />
-      <el-table-column label="档案id" align="center" prop="archivesId" />
+      <el-table-column label="库房" align="center" prop="warehouse">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.storage_room"
+            :value="scope.row.warehouse"
+          />
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="档案id" align="center" prop="archivesId" /> -->
       <el-table-column label="现有数量" align="center" prop="total" />
       <el-table-column label="发放单位" align="center" prop="outUnit" />
-      <el-table-column label="发放对象" align="center" prop="outPeople" />
+      <el-table-column label="发放对象" align="center" prop="outPeople">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.distribution_object"
+            :value="scope.row.outPeople"
+          />
+        </template>
+      </el-table-column>
       <el-table-column label="接收人" align="center" prop="recipient" />
-      <el-table-column label="入库表id" align="center" prop="registrationId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <!-- <el-table-column label="入库表id" align="center" prop="registrationId" /> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -264,20 +375,22 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['materialManagement:distribution:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['materialManagement:distribution:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -285,85 +398,154 @@
     />
 
     <!-- 添加或修改物资发放对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="物品类型" prop="wuPinType">
-          <el-select v-model="form.wuPinType" placeholder="请选择物品类型">
-            <el-option label="请选择字典生成" value="" />
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+     <div class="jiben">基本信息</div>
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+        :inline="true"
+      >
+        <el-form-item label="物品类别" prop="wuPinType">
+          <el-select v-model="form.wuPinType" placeholder="请选择物品类别">
+            <el-option
+              v-for="dict in dict.type.category"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="物品名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入物品名称" />
+          <el-select v-model="form.name" placeholder="请选择物品名称">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
         </el-form-item>
         <el-form-item label="物资规格" prop="materialSpecification">
-          <el-input v-model="form.materialSpecification" placeholder="请输入物资规格" />
+          <el-input
+            v-model="form.materialSpecification"
+            placeholder="请输入物资规格"
+          />
         </el-form-item>
         <el-form-item label="物资型号" prop="materialXh">
           <el-input v-model="form.materialXh" placeholder="请输入物资型号" />
         </el-form-item>
-        <el-form-item label="营具类型" prop="yingJuType">
-          <el-select v-model="form.yingJuType" placeholder="请选择营具类型">
-            <el-option label="请选择字典生成" value="" />
+        <el-form-item label="库房" prop="warehouse">
+          <el-select v-model="form.warehouse" placeholder="请选择库房">
+            <el-option
+              v-for="dict in dict.type.storage_room"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="责任单位" prop="responsibilityUnit">
-          <el-input v-model="form.responsibilityUnit" placeholder="请输入责任单位" />
-        </el-form-item>
-        <el-form-item label="责任人" prop="personLiable">
-          <el-input v-model="form.personLiable" placeholder="请输入责任人" />
-        </el-form-item>
+        <el-form-item label="存放位置" prop="storageLocation">
+          <el-input
+            v-model="form.storageLocation"
+            placeholder="请输入存放位置"
+          />
+          </el-form-item>
+          <el-form-item label="现有数量" prop="total">
+            <el-input v-model="form.total" placeholder="请输入现有数量" />
+          </el-form-item>
+        
         <el-form-item label="出库数量" prop="putOut">
           <el-input v-model="form.putOut" placeholder="请输入出库数量" />
         </el-form-item>
-        <el-form-item label="创建人" prop="createName">
-          <el-input v-model="form.createName" placeholder="请输入创建人" />
-        </el-form-item>
+
         <el-form-item label="发放时间" prop="putOutTime">
-          <el-date-picker clearable size="small"
+          <el-date-picker
+            clearable
+            size="small"
             v-model="form.putOutTime"
             type="date"
             value-format="yyyy-MM-dd"
-            placeholder="选择发放时间">
+            placeholder="选择发放时间"
+          >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="存放位置" prop="storageLocation">
-          <el-input v-model="form.storageLocation" placeholder="请输入存放位置" />
-        </el-form-item>
-        <el-form-item label="购买时间" prop="buyingTime">
-          <el-date-picker clearable size="small"
-            v-model="form.buyingTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择购买时间">
-          </el-date-picker>
+        <el-form-item label="营具类型" prop="yingJuType">
+          <el-select v-model="form.yingJuType" placeholder="请选择营具类型">
+            <el-option
+              v-for="dict in dict.type.camp_equipment"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="价值" prop="price">
           <el-input v-model="form.price" placeholder="请输入价值" />
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
+        <el-form-item label="发放单位" prop="outUnit">
+          <el-select v-model="form.outUnit" placeholder="请选择发放单位">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
         </el-form-item>
-        <el-form-item label="库房" prop="warehouse">
-          <el-input v-model="form.warehouse" placeholder="请输入库房" />
+        <el-form-item label="发放对象" prop="outPeople">
+          <el-select v-model="form.outPeople" placeholder="请选择发放对象">
+            <el-option
+              v-for="dict in dict.type.distribution_object"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="档案id" prop="archivesId">
-          <el-input v-model="form.archivesId" placeholder="请输入档案id" />
+        <el-form-item label="接收人" prop="recipient">
+          <el-select v-model="form.recipient" placeholder="请选择接收人">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
         </el-form-item>
-        <el-form-item label="现有数量" prop="total">
-          <el-input v-model="form.total" placeholder="请输入现有数量" />
+         <div class="jiben">备注</div>
+        <el-form-item label="" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
-        <el-form-item label="发放单位" prop="outUnit">
-          <el-input v-model="form.outUnit" placeholder="请输入发放单位" />
+
+        <!-- <el-form-item label="责任单位" prop="responsibilityUnit">
+          <el-input
+            v-model="form.responsibilityUnit"
+            placeholder="请输入责任单位"
+          />
         </el-form-item>
-        <el-form-item label="发放对象" prop="outPeople">
-          <el-input v-model="form.outPeople" placeholder="请输入发放对象" />
+        <el-form-item label="责任人" prop="personLiable">
+          <el-input v-model="form.personLiable" placeholder="请输入责任人" />
+        </el-form-item>    
+        <el-form-item label="创建人" prop="createName">
+          <el-input v-model="form.createName" placeholder="请输入创建人" />
+        </el-form-item>       
+        <el-form-item label="购买时间" prop="buyingTime">
+          <el-date-picker
+            clearable
+            size="small"
+            v-model="form.buyingTime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="选择购买时间"
+          >
+          </el-date-picker>
         </el-form-item>
-        <el-form-item label="接收人" prop="recipient">
-          <el-input v-model="form.recipient" placeholder="请输入接收人" />
+        <el-form-item label="档案id" prop="archivesId">
+          <el-input v-model="form.archivesId" placeholder="请输入档案id" />
         </el-form-item>
         <el-form-item label="入库表id" prop="registrationId">
-          <el-input v-model="form.registrationId" placeholder="请输入入库表id" />
-        </el-form-item>
+          <el-input
+            v-model="form.registrationId"
+            placeholder="请输入入库表id"
+          />
+        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -374,10 +556,18 @@
 </template>
 
 <script>
-import { listDistribution, getDistribution, delDistribution, addDistribution, updateDistribution, exportDistribution } from "@/api/materialManagement/distribution";
+import {
+  listDistribution,
+  getDistribution,
+  delDistribution,
+  addDistribution,
+  updateDistribution,
+  exportDistribution,
+} from "@/api/materialManagement/distribution";
 
 export default {
   name: "Distribution",
+  dicts: ["category", "camp_equipment", "storage_room", "distribution_object"],
   data() {
     return {
       // 遮罩层
@@ -423,13 +613,12 @@ export default {
         outUnit: null,
         outPeople: null,
         recipient: null,
-        registrationId: null
+        registrationId: null,
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      }
+      rules: {},
     };
   },
   created() {
@@ -439,7 +628,7 @@ export default {
     /** 查询物资发放列表 */
     getList() {
       this.loading = true;
-      listDistribution(this.queryParams).then(response => {
+      listDistribution(this.queryParams).then((response) => {
         this.distributionList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -475,7 +664,7 @@ export default {
         outUnit: null,
         outPeople: null,
         recipient: null,
-        registrationId: null
+        registrationId: null,
       };
       this.resetForm("form");
     },
@@ -491,9 +680,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -504,8 +693,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getDistribution(id).then(response => {
+      const id = row.id || this.ids;
+      getDistribution(id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改物资发放";
@@ -513,16 +702,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updateDistribution(this.form).then(response => {
+            updateDistribution(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addDistribution(this.form).then(response => {
+            addDistribution(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -534,24 +723,86 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除物资发放编号为"' + ids + '"的数据项？').then(function() {
-        return delDistribution(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除物资发放编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delDistribution(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有物资发放数据项？').then(() => {
-        this.exportLoading = true;
-        return exportDistribution(queryParams);
-      }).then(response => {
-        this.$download.name(response.msg);
-        this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
+      this.$modal
+        .confirm("是否确认导出所有物资发放数据项？")
+        .then(() => {
+          this.exportLoading = true;
+          return exportDistribution(queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          this.exportLoading = false;
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>
+<style scoped>
+/* 对话框背景颜色 */
+::v-deep .el-dialog {
+  width: 1016px !important;
+  background: #004d86 !important;
+}
+::v-deep .el-textarea__inner {
+  width: 965px;
+  height: 104px;
+}
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #718a9d;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+  font: 18px;
+}
+::v-deep .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+::v-deep .el-form-item__label {
+  font: 16px;
+  color: #fff;
+  width: 100px !important;
+}
+::v-deep .el-input__inner {
+  width: 200px !important;
+  height: 36px;
+  background: transparent;
+  color: #fff;
+  border: 1px solid white !important;
+  border-color: #fff !important;
+}
+/* 单位框背景颜色 */
+::v-deep .vue-treeselect__control {
+  background: #004d86 !important;
+}
+/*调整表单间距 */
+::v-deep .el-form-item__content {
+  width: 200px;
+}
+::v-deep .el-dialog__footer {
+  margin-right: 6px !important;
+}
+.contents {
+  padding: 0px 40px !important;
+}
+::v-deep .el-form-item__label {
+  width: 115px !important;
+}
+::v-deep .el-dialog__body {
+  padding: 30px 0px 30px 26px !important;
+}
+</style>

src/views/materialManagement/materialRegistration/index.vue

@@ -1,19 +1,36 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="物品类型" prop="wuPinType">
-        <el-select v-model="queryParams.wuPinType" placeholder="请选择物品类型" clearable size="small">
-          <el-option label="请选择字典生成" value="" />
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <!-- <el-form-item label="物品类型" prop="wuPinType">
+        <el-select
+          v-model="queryParams.wuPinType"
+          placeholder="请选择物品类型"
+          clearable
+          size="small"
+        >
+          <el-option
+            v-for="dict in dict.type.category"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="物品名称" prop="name">
-        <el-input
+        <el-select
           v-model="queryParams.name"
-          placeholder="请输入物品名称"
+          placeholder="请选择物品名称"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option label="请选择字典生成" value="" />
+        </el-select>
       </el-form-item>
       <el-form-item label="物资规格" prop="materialSpecification">
         <el-input
@@ -34,11 +51,16 @@
         />
       </el-form-item>
       <el-form-item label="营具类型" prop="yingJuType">
-        <el-select v-model="queryParams.yingJuType" placeholder="请选择营具类型" clearable size="small">
+        <el-select
+          v-model="queryParams.yingJuType"
+          placeholder="请选择营具类型"
+          clearable
+          size="small"
+        >
           <el-option label="请选择字典生成" value="" />
         </el-select>
-      </el-form-item>
-      <el-form-item label="责任单位" prop="responsibilityUnit">
+      </el-form-item> -->
+      <el-form-item label="" prop="responsibilityUnit">
         <el-input
           v-model="queryParams.responsibilityUnit"
           placeholder="请输入责任单位"
@@ -47,7 +69,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="责任人" prop="personLiable">
+      <el-form-item label="" prop="personLiable">
         <el-input
           v-model="queryParams.personLiable"
           placeholder="请输入责任人"
@@ -56,7 +78,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="入库数量" prop="putInt">
+      <!-- <el-form-item label="入库数量" prop="putInt">
         <el-input
           v-model="queryParams.putInt"
           placeholder="请输入入库数量"
@@ -75,11 +97,14 @@
         />
       </el-form-item>
       <el-form-item label="入库时间" prop="storageTime">
-        <el-date-picker clearable size="small"
+        <el-date-picker
+          clearable
+          size="small"
           v-model="queryParams.storageTime"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="选择入库时间">
+          placeholder="选择入库时间"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="入库编号" prop="inboundNo">
@@ -101,11 +126,14 @@
         />
       </el-form-item>
       <el-form-item label="购买时间" prop="buyingTime">
-        <el-date-picker clearable size="small"
+        <el-date-picker
+          clearable
+          size="small"
           v-model="queryParams.buyingTime"
           type="date"
           value-format="yyyy-MM-dd"
-          placeholder="选择购买时间">
+          placeholder="选择购买时间"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="价值" prop="price">
@@ -118,13 +146,19 @@
         />
       </el-form-item>
       <el-form-item label="库房(待定)" prop="warehouse">
-        <el-input
+        <el-select
           v-model="queryParams.warehouse"
-          placeholder="请输入库房(待定)"
+          placeholder="请选择库房(待定)"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        >
+          <el-option
+            v-for="dict in dict.type.storage_room"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="档案id" prop="archivesId">
         <el-input
@@ -134,10 +168,12 @@
           size="small"
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="btn" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button size="btr" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -150,7 +186,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['materialManagement:materialRegistration:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -161,7 +198,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['materialManagement:materialRegistration:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -172,7 +210,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['materialManagement:materialRegistration:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -183,61 +222,106 @@
           :loading="exportLoading"
           @click="handleExport"
           v-hasPermi="['materialManagement:materialRegistration:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <!-- <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar> -->
     </el-row>
 
-    <el-table v-loading="loading" :data="materialRegistrationList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="materialRegistrationList"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="{ background: '#003C69', color: 'white' }"
+    >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键id" align="center" prop="id" />
-      <el-table-column label="物品类型" align="center" prop="wuPinType" />
+      <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
+      <el-table-column label="物品类型" align="center" prop="wuPinType">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.category"
+            :value="scope.row.wuPinType"
+          />
+        </template>
+      </el-table-column>
       <el-table-column label="物品名称" align="center" prop="name" />
-      <el-table-column label="物资规格" align="center" prop="materialSpecification" />
+      <el-table-column
+        label="物资规格"
+        align="center"
+        prop="materialSpecification"
+      />
       <el-table-column label="物资型号" align="center" prop="materialXh" />
       <el-table-column label="营具类型" align="center" prop="yingJuType" />
-      <el-table-column label="责任单位" align="center" prop="responsibilityUnit" />
-      <el-table-column label="责任人" align="center" prop="personLiable" />
+      <!-- <el-table-column
+        label="责任单位"
+        align="center"
+        prop="responsibilityUnit"
+      /> -->
+      <!-- <el-table-column label="责任人" align="center" prop="personLiable" /> -->
       <el-table-column label="入库数量" align="center" prop="putInt" />
-      <el-table-column label="创建人" align="center" prop="createName" />
-      <el-table-column label="入库时间" align="center" prop="storageTime" width="180">
+      <!-- <el-table-column label="创建人" align="center" prop="createName" /> -->
+      <el-table-column
+        label="入库时间"
+        align="center"
+        prop="storageTime"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.storageTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.storageTime, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
       <el-table-column label="入库编号" align="center" prop="inboundNo" />
       <el-table-column label="存放位置" align="center" prop="storageLocation" />
-      <el-table-column label="购买时间" align="center" prop="buyingTime" width="180">
+      <el-table-column
+        label="购买时间"
+        align="center"
+        prop="buyingTime"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.buyingTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.buyingTime, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
       <el-table-column label="价值" align="center" prop="price" />
       <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="库房(待定)" align="center" prop="warehouse" />
-      <el-table-column label="档案id" align="center" prop="archivesId" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="库房" align="center" prop="warehouse">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.storage_room"
+            :value="scope.row.warehouse"
+          />
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="档案id" align="center" prop="archivesId" /> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
-            size="mini"
+            size="btu"
             type="text"
-            icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['materialManagement:materialRegistration:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
-            size="mini"
+            size="btd"
             type="text"
-            icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['materialManagement:materialRegistration:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -245,73 +329,123 @@
     />
 
     <!-- 添加或修改物资入库登记对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="500px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div class="jiben">基本信息</div>
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+        :inline="true"
+      >
         <el-form-item label="物品类型" prop="wuPinType">
           <el-select v-model="form.wuPinType" placeholder="请选择物品类型">
-            <el-option label="请选择字典生成" value="" />
+            <el-option
+              v-for="dict in dict.type.category"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="物品名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入物品名称" />
+          <el-select v-model="form.name" placeholder="请选择物品名称">
+            <el-option label="请选择字典生成" value="" />
+          </el-select>
         </el-form-item>
         <el-form-item label="物资规格" prop="materialSpecification">
-          <el-input v-model="form.materialSpecification" placeholder="请输入物资规格" />
+          <el-input
+            v-model="form.materialSpecification"
+            placeholder="请输入物资规格"
+          />
         </el-form-item>
         <el-form-item label="物资型号" prop="materialXh">
           <el-input v-model="form.materialXh" placeholder="请输入物资型号" />
         </el-form-item>
-        <el-form-item label="营具类型" prop="yingJuType">
+        <!-- <el-form-item label="营具类型" prop="yingJuType">
           <el-select v-model="form.yingJuType" placeholder="请选择营具类型">
             <el-option label="请选择字典生成" value="" />
           </el-select>
+        </el-form-item> -->
+        <el-form-item label="库房(待定)" prop="warehouse">
+          <el-select v-model="form.warehouse" placeholder="请选择库房(待定)">
+            <el-option
+              v-for="dict in dict.type.storage_room"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
         </el-form-item>
-        <el-form-item label="责任单位" prop="responsibilityUnit">
-          <el-input v-model="form.responsibilityUnit" placeholder="请输入责任单位" />
-        </el-form-item>
-        <el-form-item label="责任人" prop="personLiable">
-          <el-input v-model="form.personLiable" placeholder="请输入责任人" />
+        <el-form-item label="存放位置" prop="storageLocation">
+          <el-input
+            v-model="form.storageLocation"
+            placeholder="请输入存放位置"
+          />
         </el-form-item>
         <el-form-item label="入库数量" prop="putInt">
           <el-input v-model="form.putInt" placeholder="请输入入库数量" />
         </el-form-item>
-        <el-form-item label="创建人" prop="createName">
-          <el-input v-model="form.createName" placeholder="请输入创建人" />
+        <el-form-item label="入库编号" prop="inboundNo">
+          <el-input v-model="form.inboundNo" placeholder="请输入入库编号" />
         </el-form-item>
         <el-form-item label="入库时间" prop="storageTime">
-          <el-date-picker clearable size="small"
+          <el-date-picker
+            clearable
+            size="small"
             v-model="form.storageTime"
             type="date"
             value-format="yyyy-MM-dd"
-            placeholder="选择入库时间">
+            placeholder="选择入库时间"
+          >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="入库编号" prop="inboundNo">
-          <el-input v-model="form.inboundNo" placeholder="请输入入库编号" />
-        </el-form-item>
-        <el-form-item label="存放位置" prop="storageLocation">
-          <el-input v-model="form.storageLocation" placeholder="请输入存放位置" />
+        <el-form-item label="价值" prop="price">
+          <el-input v-model="form.price" placeholder="请输入价值" />
         </el-form-item>
         <el-form-item label="购买时间" prop="buyingTime">
-          <el-date-picker clearable size="small"
+          <el-date-picker
+            clearable
+            size="small"
             v-model="form.buyingTime"
             type="date"
             value-format="yyyy-MM-dd"
-            placeholder="选择购买时间">
+            placeholder="选择购买时间"
+          >
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="价值" prop="price">
-          <el-input v-model="form.price" placeholder="请输入价值" />
+        <div class="jiben">备注</div>
+        <el-form-item label="" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
+        <!-- <el-form-item label="责任单位" prop="responsibilityUnit">
+          <el-input
+            v-model="form.responsibilityUnit"
+            placeholder="请输入责任单位"
+          />
         </el-form-item>
-        <el-form-item label="库房(待定)" prop="warehouse">
-          <el-input v-model="form.warehouse" placeholder="请输入库房(待定)" />
+        <el-form-item label="责任人" prop="personLiable">
+          <el-input v-model="form.personLiable" placeholder="请输入责任人" />
+        </el-form-item>
+       
+        <el-form-item label="创建人" prop="createName">
+          <el-input v-model="form.createName" placeholder="请输入创建人" />
         </el-form-item>
+        
+        
         <el-form-item label="档案id" prop="archivesId">
           <el-input v-model="form.archivesId" placeholder="请输入档案id" />
-        </el-form-item>
+        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -322,10 +456,18 @@
 </template>
 
 <script>
-import { listMaterialRegistration, getMaterialRegistration, delMaterialRegistration, addMaterialRegistration, updateMaterialRegistration, exportMaterialRegistration } from "@/api/materialManagement/materialRegistration";
+import {
+  listMaterialRegistration,
+  getMaterialRegistration,
+  delMaterialRegistration,
+  addMaterialRegistration,
+  updateMaterialRegistration,
+  exportMaterialRegistration,
+} from "@/api/materialManagement/materialRegistration";
 
 export default {
   name: "MaterialRegistration",
+  dicts: ["category", "storage_room"],
   data() {
     return {
       // 遮罩层
@@ -367,13 +509,12 @@ export default {
         buyingTime: null,
         price: null,
         warehouse: null,
-        archivesId: null
+        archivesId: null,
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      }
+      rules: {},
     };
   },
   created() {
@@ -383,7 +524,7 @@ export default {
     /** 查询物资入库登记列表 */
     getList() {
       this.loading = true;
-      listMaterialRegistration(this.queryParams).then(response => {
+      listMaterialRegistration(this.queryParams).then((response) => {
         this.materialRegistrationList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -415,7 +556,7 @@ export default {
         price: null,
         remark: null,
         warehouse: null,
-        archivesId: null
+        archivesId: null,
       };
       this.resetForm("form");
     },
@@ -431,9 +572,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -444,8 +585,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getMaterialRegistration(id).then(response => {
+      const id = row.id || this.ids;
+      getMaterialRegistration(id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改物资入库登记";
@@ -453,16 +594,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updateMaterialRegistration(this.form).then(response => {
+            updateMaterialRegistration(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addMaterialRegistration(this.form).then(response => {
+            addMaterialRegistration(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -474,24 +615,86 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除物资入库登记编号为"' + ids + '"的数据项？').then(function() {
-        return delMaterialRegistration(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除物资入库登记编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delMaterialRegistration(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有物资入库登记数据项？').then(() => {
-        this.exportLoading = true;
-        return exportMaterialRegistration(queryParams);
-      }).then(response => {
-        this.$download.name(response.msg);
-        this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
+      this.$modal
+        .confirm("是否确认导出所有物资入库登记数据项？")
+        .then(() => {
+          this.exportLoading = true;
+          return exportMaterialRegistration(queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          this.exportLoading = false;
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>
+<style scoped>
+/* 对话框背景颜色 */
+::v-deep .el-dialog {
+  width: 1016px !important;
+  background: #004d86 !important;
+}
+::v-deep .el-textarea__inner {
+  width: 965px;
+  height: 104px;
+}
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #718a9d;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+  font: 18px;
+}
+::v-deep .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+::v-deep .el-form-item__label {
+  font: 16px;
+  color: #fff;
+  width: 100px !important;
+}
+::v-deep .el-input__inner {
+  width: 200px !important;
+  height: 36px;
+  background: transparent;
+  color: #fff;
+  border: 1px solid white !important;
+  border-color: #fff !important;
+}
+/* 单位框背景颜色 */
+::v-deep .vue-treeselect__control {
+  background: #004d86 !important;
+}
+/*调整表单间距 */
+::v-deep .el-form-item__content {
+  width: 200px;
+}
+::v-deep .el-dialog__footer {
+  margin-right: 6px !important;
+}
+.contents {
+  padding: 0px 40px !important;
+}
+::v-deep .el-form-item__label {
+  width: 115px !important;
+}
+::v-deep .el-dialog__body {
+  padding: 30px 0px 30px 26px !important;
+}
+</style>

src/views/materialManagement/propertyChange/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="变更后人员名称" prop="propertyId">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <!-- <el-form-item label="变更后人员名称" prop="propertyId">
         <el-input
           v-model="queryParams.propertyId"
           placeholder="请输入变更后人员名称"
@@ -9,8 +15,8 @@
           size="small"
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
-      <el-form-item label="营具名称" prop="name">
+      </el-form-item> -->
+      <el-form-item label="" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入营具名称"
@@ -19,7 +25,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="营具编号" prop="rukuNumber">
+      <!-- <el-form-item label="营具编号" prop="rukuNumber">
         <el-input
           v-model="queryParams.rukuNumber"
           placeholder="请输入营具编号"
@@ -27,8 +33,8 @@
           size="small"
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
-      <el-form-item label="变更时间" prop="changeTime">
+      </el-form-item> -->
+      <el-form-item label="" prop="changeTime">
         <el-input
           v-model="queryParams.changeTime"
           placeholder="请输入变更时间"
@@ -37,7 +43,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="变更前所属单位" prop="beforeUnitId">
+      <!-- <el-form-item label="变更前所属单位" prop="beforeUnitId">
         <el-input
           v-model="queryParams.beforeUnitId"
           placeholder="请输入变更前所属单位"
@@ -126,10 +132,12 @@
           size="small"
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="btn" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button size="btr" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -142,7 +150,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['materialManagement:propertyChange:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -153,7 +162,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['materialManagement:propertyChange:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -164,7 +174,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['materialManagement:propertyChange:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -175,51 +186,100 @@
           :loading="exportLoading"
           @click="handleExport"
           v-hasPermi="['materialManagement:propertyChange:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <!-- <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar> -->
     </el-row>
 
-    <el-table v-loading="loading" :data="propertyChangeList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="propertyChangeList"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="{ background: '#003C69', color: 'white' }"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="变更后人员名称" align="center" prop="id" />
-      <el-table-column label="变更后人员名称" align="center" prop="propertyId" />
+      <el-table-column
+        label="变更后人员名称"
+        align="center"
+        prop="propertyId"
+      />
       <el-table-column label="营具名称" align="center" prop="name" />
       <el-table-column label="营具编号" align="center" prop="rukuNumber" />
       <el-table-column label="变更时间" align="center" prop="changeTime" />
-      <el-table-column label="变更前所属单位" align="center" prop="beforeUnitId" />
-      <el-table-column label="变更后所属单位" align="center" prop="afterUnitId" />
-      <el-table-column label="变更前人员名称" align="center" prop="beforePeopleId" />
-      <el-table-column label="变更后人员名称" align="center" prop="afterPeopleId" />
+      <el-table-column
+        label="变更前所属单位"
+        align="center"
+        prop="beforeUnitId"
+      />
+      <el-table-column
+        label="变更后所属单位"
+        align="center"
+        prop="afterUnitId"
+      />
+      <el-table-column
+        label="变更前人员名称"
+        align="center"
+        prop="beforePeopleId"
+      />
+      <el-table-column
+        label="变更后人员名称"
+        align="center"
+        prop="afterPeopleId"
+      />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="备注" align="center" prop="createtime" />
       <el-table-column label="备注" align="center" prop="updatetime" />
-      <el-table-column label="变更前单位名称" align="center" prop="beforeUnitName" />
-      <el-table-column label="变更后单位名称" align="center" prop="afterUnitName" />
-      <el-table-column label="变更前人员名称" align="center" prop="beforePeopleName" />
-      <el-table-column label="变更后人员名称" align="center" prop="afterPeopleName" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <!-- <el-table-column
+        label="变更前单位名称"
+        align="center"
+        prop="beforeUnitName"
+      />
+      <el-table-column
+        label="变更后单位名称"
+        align="center"
+        prop="afterUnitName"
+      />
+      <el-table-column
+        label="变更前人员名称"
+        align="center"
+        prop="beforePeopleName"
+      />
+      <el-table-column
+        label="变更后人员名称"
+        align="center"
+        prop="afterPeopleName"
+      /> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
-            size="mini"
+            size="btu"
             type="text"
-            icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['materialManagement:propertyChange:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
-            size="mini"
+            size="btd"
             type="text"
-            icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['materialManagement:propertyChange:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -227,11 +287,28 @@
     />
 
     <!-- 添加或修改营具物资变更对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="变更后人员名称" prop="propertyId">
-          <el-input v-model="form.propertyId" placeholder="请输入变更后人员名称" />
-        </el-form-item>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="1016px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+        <div class="jiben">基本信息</div>
+
+      <el-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+        :inline="true"
+      >
+        <!-- <el-form-item label="变更后人员名称" prop="propertyId">
+          <el-input
+            v-model="form.propertyId"
+            placeholder="请输入变更后人员名称"
+          />
+        </el-form-item> -->
         <el-form-item label="营具名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入营具名称" />
         </el-form-item>
@@ -242,31 +319,61 @@
           <el-input v-model="form.changeTime" placeholder="请输入变更时间" />
         </el-form-item>
         <el-form-item label="变更前所属单位" prop="beforeUnitId">
-          <el-input v-model="form.beforeUnitId" placeholder="请输入变更前所属单位" />
+          <el-input
+            v-model="form.beforeUnitId"
+            placeholder="请输入变更前所属单位"
+          />
         </el-form-item>
         <el-form-item label="变更后所属单位" prop="afterUnitId">
-          <el-input v-model="form.afterUnitId" placeholder="请输入变更后所属单位" />
+          <el-input
+            v-model="form.afterUnitId"
+            placeholder="请输入变更后所属单位"
+          />
         </el-form-item>
         <el-form-item label="变更前人员名称" prop="beforePeopleId">
-          <el-input v-model="form.beforePeopleId" placeholder="请输入变更前人员名称" />
+          <el-input
+            v-model="form.beforePeopleId"
+            placeholder="请输入变更前人员名称"
+          />
         </el-form-item>
         <el-form-item label="变更后人员名称" prop="afterPeopleId">
-          <el-input v-model="form.afterPeopleId" placeholder="请输入变更后人员名称" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <el-input
+            v-model="form.afterPeopleId"
+            placeholder="请输入变更后人员名称"
+          />
         </el-form-item>
-        <el-form-item label="变更前单位名称" prop="beforeUnitName">
-          <el-input v-model="form.beforeUnitName" placeholder="请输入变更前单位名称" />
+        
+        <!-- <el-form-item label="变更前单位名称" prop="beforeUnitName">
+          <el-input
+            v-model="form.beforeUnitName"
+            placeholder="请输入变更前单位名称"
+          />
         </el-form-item>
         <el-form-item label="变更后单位名称" prop="afterUnitName">
-          <el-input v-model="form.afterUnitName" placeholder="请输入变更后单位名称" />
+          <el-input
+            v-model="form.afterUnitName"
+            placeholder="请输入变更后单位名称"
+          />
         </el-form-item>
         <el-form-item label="变更前人员名称" prop="beforePeopleName">
-          <el-input v-model="form.beforePeopleName" placeholder="请输入变更前人员名称" />
+          <el-input
+            v-model="form.beforePeopleName"
+            placeholder="请输入变更前人员名称"
+          />
         </el-form-item>
         <el-form-item label="变更后人员名称" prop="afterPeopleName">
-          <el-input v-model="form.afterPeopleName" placeholder="请输入变更后人员名称" />
+          <el-input
+            v-model="form.afterPeopleName"
+            placeholder="请输入变更后人员名称"
+          />
+        </el-form-item> -->
+        <div class="jiben">备注</div>
+        <el-form-item label="" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -278,7 +385,14 @@
 </template>
 
 <script>
-import { listPropertyChange, getPropertyChange, delPropertyChange, addPropertyChange, updatePropertyChange, exportPropertyChange } from "@/api/materialManagement/propertyChange";
+import {
+  listPropertyChange,
+  getPropertyChange,
+  delPropertyChange,
+  addPropertyChange,
+  updatePropertyChange,
+  exportPropertyChange,
+} from "@/api/materialManagement/propertyChange";
 
 export default {
   name: "PropertyChange",
@@ -321,16 +435,16 @@ export default {
         beforeUnitName: null,
         afterUnitName: null,
         beforePeopleName: null,
-        afterPeopleName: null
+        afterPeopleName: null,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "营具名称不能为空", trigger: "blur" }
+          { required: true, message: "营具名称不能为空", trigger: "blur" },
         ],
-      }
+      },
     };
   },
   created() {
@@ -340,7 +454,7 @@ export default {
     /** 查询营具物资变更列表 */
     getList() {
       this.loading = true;
-      listPropertyChange(this.queryParams).then(response => {
+      listPropertyChange(this.queryParams).then((response) => {
         this.propertyChangeList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -369,7 +483,7 @@ export default {
         beforeUnitName: null,
         afterUnitName: null,
         beforePeopleName: null,
-        afterPeopleName: null
+        afterPeopleName: null,
       };
       this.resetForm("form");
     },
@@ -385,9 +499,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -398,8 +512,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getPropertyChange(id).then(response => {
+      const id = row.id || this.ids;
+      getPropertyChange(id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改营具物资变更";
@@ -407,16 +521,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updatePropertyChange(this.form).then(response => {
+            updatePropertyChange(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addPropertyChange(this.form).then(response => {
+            addPropertyChange(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -428,24 +542,86 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除营具物资变更编号为"' + ids + '"的数据项？').then(function() {
-        return delPropertyChange(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除营具物资变更编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delPropertyChange(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有营具物资变更数据项？').then(() => {
-        this.exportLoading = true;
-        return exportPropertyChange(queryParams);
-      }).then(response => {
-        this.$download.name(response.msg);
-        this.exportLoading = false;
-      }).catch(() => {});
-    }
-  }
+      this.$modal
+        .confirm("是否确认导出所有营具物资变更数据项？")
+        .then(() => {
+          this.exportLoading = true;
+          return exportPropertyChange(queryParams);
+        })
+        .then((response) => {
+          this.$download.name(response.msg);
+          this.exportLoading = false;
+        })
+        .catch(() => {});
+    },
+  },
 };
 </script>
+<style scoped>
+/* 对话框背景颜色 */
+::v-deep .el-dialog {
+  width: 1016px !important;
+  background: #004d86 !important;
+}
+::v-deep .el-textarea__inner {
+  width: 965px;
+  height: 104px;
+}
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #718a9d;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+  font: 18px;
+}
+::v-deep .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+::v-deep .el-form-item__label {
+  font: 16px;
+  color: #fff;
+  width: 100px !important;
+}
+::v-deep .el-input__inner {
+  width: 200px !important;
+  height: 36px;
+  background: transparent;
+  color: #fff;
+  border: 1px solid white !important;
+  border-color: #fff !important;
+}
+/* 单位框背景颜色 */
+::v-deep .vue-treeselect__control {
+  background: #004d86 !important;
+}
+/*调整表单间距 */
+::v-deep .el-form-item__content {
+  width: 200px;
+}
+::v-deep .el-dialog__footer{
+  margin-right: 6px !important;
+}
+.contents {
+  padding: 0px 40px !important;
+}
+::v-deep .el-form-item__label{
+  width: 115px !important;
+}
+::v-deep .el-dialog__body{
+      padding: 30px 0px 30px 26px !important;
+}
+</style>