库存：详情

build/webpack.base.conf.js

@@ -46,6 +46,10 @@ module.exports = {
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
+      {
+        test:/.less$/,
+        loader:"style-loader!css-loader!less-loader"
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',

package-lock.json

@@ -2977,6 +2977,15 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
+      "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.12.0"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -7484,6 +7493,12 @@
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "is-whitespace": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/is-whitespace/-/is-whitespace-0.3.0.tgz",
@@ -9058,6 +9073,100 @@
         "invert-kv": "^1.0.0"
       }
     },
+    "less": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.1.tgz",
+      "integrity": "sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^2.5.2",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.2.6",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+          "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+          "dev": true,
+          "optional": true
+        },
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+          "dev": true,
+          "optional": true
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true,
+          "optional": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true,
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
+      "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^4.0.1"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
     "leven": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
@@ -10020,6 +10129,37 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "needle": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.8.0.tgz",
+      "integrity": "sha512-ZTq6WYkN/3782H1393me3utVYdq2XyqNUFBsprEE3VMAT0+hP/cItpnITpqsY6ep2yeFE4Tqtqwc74VqUlUYtw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",

package.json

@@ -23,6 +23,7 @@
     "gulp-load-plugins": "1.5.0",
     "gulp-replace": "0.6.1",
     "gulp-shell": "0.6.5",
+    "less-loader": "^5.0.0",
     "lodash": "4.17.5",
     "node-sass": "4.12.0",
     "npm": "^6.9.0",
@@ -65,6 +66,7 @@
     "html-webpack-plugin": "2.30.1",
     "jest": "21.2.0",
     "jest-serializer-vue": "0.3.0",
+    "less": "^4.1.1",
     "nightwatch": "0.9.12",
     "node-notifier": "5.1.2",
     "optimize-css-assets-webpack-plugin": "3.2.0",

src/views/modules/common/Description.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="description_text">
+    <div v-if="title" class="title">{{title}}</div>
+    <el-row :gutter="gutter">
+      <el-col :key="key" :span="+col" v-for="(item, key) in dataSource">
+        <div class="term">{{item.term}}</div>
+        <div class="detail">{{item.detail}}</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  const handleArrayObj = data => {
+    return data
+      .filter(item => item.tag === 'Description')
+      .map(item => ({
+        tag: item.tag,
+        term: (item.data && item.data.attrs.term) || '暂无',
+        detail: (item.children && item.children[0].text) || '暂无'
+      }))
+}
+
+export default {
+    name: 'Description',
+    props: {
+      title: String,
+      content: [Object, Array],
+      gutter: {
+        type: [Number, String],
+        default: 20
+      },
+      col: {
+        type: [Number, String],
+        default: 8
+      }
+    },
+
+    data () {
+      return {
+        dataSource: handleArrayObj(this.$slots.default || [])
+      }
+    },
+    watch: {
+      content () {
+        this.dataSource = handleArrayObj(this.$slots.default || [])
+      } // 监听重渲染
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .description_text {
+    .title {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 1.5;
+      margin-bottom: 20px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+    .term {
+      color: rgba(0,0,0,.85);
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 22px;
+      padding-bottom: 16px;
+      margin-right: 8px;
+      white-space: nowrap;
+      display: table-cell;
+      &:after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -0.5px;
+      }
+    }
+    .detail {
+      font-size: 14px;
+      line-height: 1.5;
+      width: 100%;
+      padding-bottom: 16px;
+      color: rgba(0, 0, 0, 0.65);
+      display: table-cell;
+    }
+  }
+</style>

src/views/modules/warehouse/stock-details.vue

@@ -4,21 +4,22 @@
         :title="!dataForm.materialId ? '详情' : '详情'"
         :close-on-click-modal="false"
         :visible.sync="visible">
-        <el-form :model="dataForm" ref="dataForm" label-width="80px">
-          <el-form-item label="物料名称" prop="materialName">
-            <span>{{dataForm.materialName}}</span>
-          </el-form-item>
-        </el-form>
+        <DescriptionList title="" col="6" :content="dataForm">
+          <Description term="物料编码">{{dataForm.materialName}}</Description>
+          <Description term="物料名称">{{dataForm.materialName}}</Description>
+        </DescriptionList>
         <span slot="footer" class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-    </span>
+          <el-button @click="visible = false">取消</el-button>
+        </span>
       </el-dialog>
     </div>
 </template>
 
 <script>
+  import DescriptionList from '../common/Description'
   export default {
     name: 'stock-details',
+    components: { DescriptionList},
     data () {
       return {
         visible: false,