联调理赔 列表 保存接口

新加下拉选择器组件
调试上传附件组件

.gitignore

@@ -23,4 +23,3 @@ yarn-error.log*
 *.sln
 *.sw*
 *.lock
-.prettierrc

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 150,
+  "tabWidth": 2           
+}

src/api/dicSelect/index.js

@@ -0,0 +1,20 @@
+import request from '@/router/axios';
+
+
+//获取公共下拉数据接口
+export function getDicinit(method, url, data) {
+    if (method == 'get' || method == 'GET') {
+        return request({
+            url: '/api' + url,
+            method: method,
+            params: data
+        })
+    } else {
+        return request({
+            url: '/api' + url,
+            method: method,
+            data: data
+        })
+    }
+
+}

src/api/uploadFile/upload-file.js

@@ -0,0 +1,27 @@
+import request from '@/router/axios';
+
+//附件上传列表删除
+/**
+ * @param {any} data
+ * @param {string} url
+ */
+export function updateListRemove(data, url) {
+  return request({
+    url: '/api'+url,
+    method: 'post',
+    data: {
+      id: data
+    }
+  })
+}
+//附件上传列表删除
+/**
+ * @param {any} data
+ */
+export function submitList(data) {
+  return request({
+    url: '/api/blade-los/filescenter/submitList',
+    method: 'post',
+    data:data
+  })
+}

src/components/dicSelect/main.vue

@@ -0,0 +1,392 @@
+<template>
+  <!-- 中文下拉 -->
+  <div>
+    <div style="display: flex;">
+      <el-tooltip effect="dark" :disabled="!collapseTags" :content="collapseTags ? (value ? value.join(';') : null) : value" placement="top">
+        <el-select
+          ref="mySelect"
+          style="width:100%"
+          v-model="value"
+          @input="inputChange"
+          :placeholder="'请选择 ' + placeholder"
+          @change="selectChange"
+          @clear="clear"
+          :clearable="clearable"
+          :multiple="multiple"
+          :filterable="filterable"
+          :remote="remote"
+          :remote-method="remoteMethod"
+          :loading="loading"
+          :size="size"
+          :disabled="disabled"
+          :collapse-tags="collapseTags"
+          @visible-change="visibleChange"
+          :allow-create="allowCreate"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item[key]"
+            :label="item[label]"
+            :value="item[keyValue ? keyValue : label]"
+            :disabled="item.disabled"
+          >
+            <span v-if="slotRight" style="float: left">{{ item[label] }}</span>
+            <span
+              v-if="slotRight"
+              style="float: right; color: #8492a6; font-size: 13px; max-width: 200px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
+              >{{ item[rightLabel] }}</span
+            >
+            <span
+              v-if="diySlot"
+              style="float: left;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
+              :style="{ 'max-width': selectWidth - 30 + 'px' }"
+              >{{ item[label] }}</span
+            >
+          </el-option>
+        </el-select>
+      </el-tooltip>
+      <el-button v-if="searchShow" icon="el-icon-search" size="small" :disabled="disabled" @click="open()" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDicinit } from "@/api/dicSelect/index";
+export default {
+  data() {
+    return {
+      options: [],
+      loading: false,
+      data: {},
+      form: {},
+      query: {},
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      dataList: [],
+      selectionList: [],
+      selectWidth: 0
+    };
+  },
+  props: {
+    activateCreated: {
+      type: Boolean,
+      default: true
+    },
+    slotRight: {
+      type: Boolean,
+      default: false
+    },
+    diySlot: {
+      type: Boolean,
+      default: false
+    },
+    key: {
+      type: [String, Number],
+      default: null
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    rightLabel: {
+      type: String,
+      default: ""
+    },
+    keyValue: {
+      type: [String, Number],
+      default: null
+    },
+    res: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: "请输入"
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    method: {
+      type: String,
+      default: "GET"
+    },
+    url: {
+      type: String,
+      default: ""
+    },
+    dataName: {
+      type: String,
+      default: ""
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    filterable: {
+      type: Boolean,
+      default: false
+    },
+    remote: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "small"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    searchShow: {
+      type: Boolean,
+      default: false
+    },
+    treeShow: {
+      type: Boolean,
+      default: false
+    },
+    mockData: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    collapseTags: {
+      type: Boolean,
+      default: false
+    },
+    default: {
+      type: Boolean,
+      default: false
+    },
+    defaultValue: {
+      type: String,
+      default: ""
+    },
+    disabledLabel: {
+      type: String,
+      default: ""
+    },
+    dataType: {
+      type: String,
+      default: ""
+    },
+    multipleStrings: {
+      type: Boolean,
+      default: false
+    },
+    allowCreate: {
+      type: Boolean,
+      default: false
+    },
+    initData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  model: {
+    prop: "value",
+    event: "selectedValue"
+  },
+  created() {},
+  mounted() {
+    if (this.activateCreated) {
+      if (this.initData) {
+        this.getDicData();
+      }
+    } else {
+      this.options = this.mockData;
+    }
+    if (this.diySlot) {
+      this.$nextTick(() => {
+        this.selectWidth = this.$refs.mySelect.$el.offsetWidth;
+        this.$refs.mySelect.$el.querySelector(".el-select-dropdown").style.width = `${this.selectWidth}px`;
+      });
+    }
+  },
+  watch: {
+    value: {
+      handler(val, oldVal) {
+        if (this.dataType == "string") {
+          if (val) {
+            if (typeof val == "string") {
+              this.value = val.split(",");
+            }
+          } else {
+            this.value = [];
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    /**
+     * @param {any} status
+     */
+    visibleChange(status) {
+      if (status) {
+        if (this.options.length == 0) {
+          this.data = {};
+          this.getDicData();
+        }
+        this.$emit("visibleChange");
+      }
+    },
+    inputChange() {
+      if (this.dataType == "string") {
+        if (this.value && this.value.length) {
+          this.$emit("selectedValue", this.value.join(","));
+        } else {
+          this.$emit("selectedValue", null);
+        }
+      } else {
+        this.$emit("selectedValue", this.value);
+      }
+    },
+    /**
+     * @param {string} query
+     */
+    remoteMethod(query) {
+      if (query !== "") {
+        setTimeout(() => {
+          this.data[this.dataName] = query;
+          this.getDicData();
+        }, 200);
+      } else {
+        setTimeout(() => {
+          this.data = this.$options.data().data;
+          this.getDicData();
+        }, 200);
+      }
+    },
+    getDicData() {
+      if (this.url) {
+        this.loading = true;
+        getDicinit(this.method, this.url, this.data)
+          .then(res => {
+            if (this.res) {
+              res.data.data[this.res].forEach(e => {
+                if (this.disablexdLabel.split(",").some(item => item == e[this.label])) {
+                  e.disabled = true;
+                }
+              });
+              this.options = res.data.data[this.res];
+            } else {
+              res.data.data.forEach(e => {
+                if (this.disabledLabel.split(",").some(item => item == e[this.label])) {
+                  e.disabled = true;
+                }
+              });
+              this.options = res.data.data;
+            }
+          })
+          .finally(() => {
+            this.loading = false;
+          });
+      } else {
+        this.options = this.mockData;
+      }
+    },
+    /**
+     * @param {any} data
+     */
+    IdGetDicData(data) {
+      this.loading = true;
+      getDicinit(this.method, this.url, data)
+        .then(res => {
+          if (this.res) {
+            this.options = res.data.data[this.res];
+          } else {
+            this.options = res.data.data;
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    /**
+     * @param {any[]} row
+     */
+    selectChange(row) {
+      if (this.dataType == "string") {
+        let data = [];
+        let ids = [];
+        let multipleData = [];
+        this.options.forEach(e => {
+          if (row.length) {
+            if (this.keyValue) {
+              row.forEach(item => {
+                if (item == e[this.keyValue]) {
+                  data.push(e[this.label]);
+                  this.$emit("selectChange", data.join(","));
+                }
+              });
+            }
+            if (this.label) {
+              row.forEach(item => {
+                if (item == e[this.label]) {
+                  ids.push(e.id);
+                  data.push(e[this.label]);
+                  if (this.multipleStrings) {
+                    multipleData.push(e);
+                    this.$emit("selectChange", {
+                      ids: ids.join(","),
+                      names: data.join(","),
+                      multipleData: multipleData
+                    });
+                  } else {
+                    this.$emit("selectChange", {
+                      ids: ids.join(","),
+                      names: data.join(",")
+                    });
+                  }
+                }
+              });
+            }
+          } else {
+            this.$emit("selectChange", null);
+          }
+        });
+      } else {
+        this.options.forEach(e => {
+          if (this.keyValue) {
+            if (row == e[this.keyValue]) {
+              this.$emit("selectChange", e);
+            }
+          }
+          if (this.label) {
+            if (row == e[this.label]) {
+              this.$emit("selectChange", e);
+            }
+          }
+        });
+      }
+    },
+    clear() {
+      if (this.url) {
+        this.data = this.$options.data().data;
+        this.getDicData();
+      }
+      this.$emit("selectChange", null);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-col-md-8 {
+  width: 24.33333%;
+}
+</style>

src/components/uploadFile/index.vue

@@ -5,9 +5,6 @@
       :data="data"
       id="out-table"
       ref="crud"
-      :header-cell-class-name="headerClassName"
-      :row-style="{ height: '20px', padding: '0px' }"
-      :cell-style="{ height: '20px', padding: '0px' }"
       @selection-change="selectionChange"
     >
       <template slot="menuLeft">
@@ -30,6 +27,7 @@
 
 <script>
 import { getToken } from '@/util/auth';
+import { updateListRemove, submitList } from '@/api/uploadFile/upload-file';
 export default {
   name: 'detailsPage',
   data() {
@@ -51,6 +49,7 @@ export default {
         selection: true,
         align: 'center',
         menu: false,
+        columnBtn: false,
         column: [
           {
             label: '原始文件名',
@@ -136,6 +135,34 @@ export default {
       this.selectionList = list;
     },
     /**
+     * @param {{ id: any; }} row
+     * @param {any} index
+     */
+    rowDel(row, index) {
+      this.$confirm('确定将选择数据删除?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (row.id) {
+          updateListRemove(row.id, this.delUrl).then(res => {
+            if (res.data.success) {
+              this.$message.success('操作成功!');
+              this.data.splice(index, 1);
+            }
+          });
+        } else {
+          this.data.splice(index, 1);
+        }
+      });
+    },
+    /**
+     * @param {string | any[]} filename
+     */
+    getFileExtension(filename) {
+      return filename.slice(((filename.lastIndexOf('.') - 1) >>> 0) + 2);
+    },
+    /**
      * @param {any} res
      * @param {any} file
      * @param {any} fileList
@@ -144,7 +171,8 @@ export default {
       this.data.push({
         pid: this.pId ? this.pId : null,
         fileName: res.data.originalName,
-        url: res.data[this.linkKey]
+        fileUrl: res.data[this.linkKey],
+        fileType: this.getFileExtension(res.data.originalName)
       });
     },
     /**
@@ -153,23 +181,8 @@ export default {
      * @param {any} fileList
      */
     onError(err, file, fileList) {
-        console.log(err)
+      console.log(err);
       this.$message.error(err);
-    },
-    /**
-     * @param {{ columnIndex: number; column: { level: number; }; }} tab
-     */
-    headerClassName(tab) {
-      //颜色间隔
-      let back = '';
-      if (tab.columnIndex >= 0 && tab.column.level === 1) {
-        if (tab.columnIndex % 2 === 0) {
-          back = 'back-one';
-        } else if (tab.columnIndex % 2 === 1) {
-          back = 'back-two';
-        }
-      }
-      return back;
     }
   }
 };
@@ -186,18 +199,6 @@ export default {
 ::v-deep .avue-crud .el-table .el-form-item__label {
   left: -1px;
 }
-::v-deep #out-table .back-one {
-  background: #ecf5ff !important;
-  text-align: center;
-  padding: 4px 0;
-}
-
-::v-deep #out-table .back-two {
-  background: #ecf5ff !important;
-  text-align: center;
-  padding: 4px 0;
-}
-
 ::v-deep .el-table--small td,
 .el-table--small th {
   padding: 2px !important;

src/views/claimSettlement/detailsPage.vue

@@ -33,32 +33,26 @@
       </div>
     </div>
     <div style="margin-top: 50px">
-      <el-tab-pane label="基础信息">
-        <trade-card title="基础信息">
-          <avue-form :option="optionForm" v-model="form" ref="form">
-          </avue-form>
-        </trade-card>
-        <trade-card title="文件中心">
-          <upload-file :data="[]" :disabled="editDis"></upload-file>
-        </trade-card>
-        <trade-card title="反馈表">
-          <avue-crud
-            :option="option"
-            :data="data"
-            id="out-table"
-            ref="crud"
-            :header-cell-class-name="headerClassName"
-            :row-style="{ height: '20px', padding: '0px' }"
-            :cell-style="{ height: '20px', padding: '0px' }"
-            @selection-change="selectionChange"
-          >
-          </avue-crud>
-        </trade-card>
-        <trade-card title="操作记录">
-          <avue-form :option="optionForm2" v-model="form" ref="form2">
-          </avue-form>
-        </trade-card>
-      </el-tab-pane>
+      <trade-card title="基础信息">
+        <avue-form :option="optionForm" v-model="form" ref="form"> </avue-form>
+      </trade-card>
+      <trade-card title="文件中心">
+        <upload-file :data="[]" :disabled="editDis"></upload-file>
+      </trade-card>
+      <trade-card title="反馈表">
+        <avue-crud
+          :option="option"
+          :data="[]"
+          id="out-table"
+          ref="crud"
+          @selection-change="selectionChange"
+        >
+        </avue-crud>
+      </trade-card>
+      <trade-card title="操作记录">
+        <!-- <avue-form :option="optionForm2" v-model="form" ref="form2">
+          </avue-form> -->
+      </trade-card>
     </div>
   </div>
 </template>
@@ -133,14 +127,14 @@ export default {
             prop: 'purchaseDate',
             type: 'date',
             format: 'yyyy-MM-dd',
-            valueFormat: 'yyyy-MM-dd'
+            valueFormat: 'yyyy-MM-dd 00:00:00'
           },
           {
             label: '装车日期',
             prop: 'mountDate',
             type: 'date',
             format: 'yyyy-MM-dd',
-            valueFormat: 'yyyy-MM-dd'
+            valueFormat: 'yyyy-MM-dd 00:00:00'
           },
           {
             label: '行驶里程(km)',
@@ -223,6 +217,7 @@ export default {
         calcHeight: 30,
         menuWidth: 60,
         searchMenuSpan: 18,
+        index:true,
         tip: false,
         border: true,
         addBtn: false,
@@ -233,15 +228,9 @@ export default {
         selection: true,
         align: 'center',
         menu: false,
+        columnBtn:false,
         column: [
           {
-            label: 'index',
-            prop: 'index',
-            width: '55',
-            fixed: true,
-            headerslot: true
-          },
-          {
             label: '原始文件名',
             prop: 'fileName',
             overHidden: true
@@ -315,6 +304,30 @@ export default {
         this.optionForm.disabled = false;
       }
     },
+    submit() {
+      // @ts-ignore
+      this.$refs.form.validate((valid, done) => {
+        done();
+        if (valid) {
+          const loading = this.$loading({
+            lock: true,
+            text: '加载中',
+            spinner: 'el-icon-loading',
+            background: 'rgba(255,255,255,0.7)'
+          });
+          submit(this.form)
+            .then(res => {
+              this.$message.success('保存成功');
+              this.getDetail(res.data.data.id);
+            })
+            .finally(() => {
+              loading.close();
+            });
+        } else {
+          return false;
+        }
+      });
+    },
     /**
      * @param {any} id
      */
@@ -333,21 +346,11 @@ export default {
           loading.close();
         });
     },
-     // 更改表格颜色
     /**
-     * @param {{ columnIndex: number; column: { level: number; }; }} tab
+     * @param {any} type
      */
-    headerClassName(tab) {
-      //颜色间隔
-      let back = ""
-      if (tab.columnIndex >= 0 && tab.column.level === 1) {
-        if (tab.columnIndex % 2 === 0) {
-          back = "back-one"
-        } else if (tab.columnIndex % 2 === 1) {
-          back = "back-two"
-        }
-      }
-      return back;
+    goBack(type) {
+      this.$emit('goBack');
     },
   }
 };
@@ -369,18 +372,6 @@ export default {
     margin-bottom: 0px !important;
   }
 }
-::v-deep #out-table .back-one {
-  background: #ecf5ff !important;
-  text-align: center;
-  padding: 4px 0;
-}
-
-::v-deep #out-table .back-two {
-  background: #ecf5ff !important;
-  text-align: center;
-  padding: 4px 0;
-}
-
 ::v-deep .el-table--small td,
 .el-table--small th {
   padding: 2px !important;

src/views/claimSettlement/index.vue

@@ -9,7 +9,6 @@
         :data="data"
         :page.sync="page"
         :search.sync="query"
-        :header-cell-class-name="headerClassName"
         @search-change="searchChange"
         @search-reset="searchReset"
         @selection-change="selectionChange"
@@ -354,37 +353,11 @@ export default {
       this.isShow = true;
       this.onLoad(this.page, this.query);
     },
-    // 更改表格颜色
-    /**
-     * @param {{ columnIndex: number; column: { level: number; }; }} tab
-     */
-    headerClassName(tab) {
-      //颜色间隔
-      let back = '';
-      if (tab.columnIndex >= 0 && tab.column.level === 1) {
-        if (tab.columnIndex % 2 === 0) {
-          back = 'back-one';
-        } else if (tab.columnIndex % 2 === 1) {
-          back = 'back-two';
-        }
-      }
-      return back;
-    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-::v-deep #out-table .back-one {
-  background: #ecf5ff !important;
-  text-align: center;
-}
-
-::v-deep #out-table .back-two {
-  background: #ecf5ff !important;
-  text-align: center;
-}
-
 ::v-deep .el-col-md-8 {
   width: 24.33333%;
 }

tsconfig.json

@@ -48,7 +48,7 @@
     ],
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "strictNullChecks": true,

vue.config.js

@@ -55,8 +55,9 @@ module.exports = {
     proxy: {
       '/api': {
         //本地服务接口地址
+        target: 'http://192.168.8.114:1080',
         // target: 'http://127.0.0.1:1080',
-        target: 'http://gubersial-api.cpolar.top',
+        // target: 'http://gubersial-api.cpolar.top',
         // target: 'http://gubersial-ui.cpolar.top',
         // target: 'https://22687sh999.goho.co',
         ws: true,