优化

manager-admin/src/api/pjShipped.js

@@ -0,0 +1,34 @@
+/**
+ * 发货管理API
+ */
+
+import request from '@/utils/request'
+
+/**
+ * 获取商品列表
+ * @param params
+ */
+export function getList(params) {
+  return request({
+    url: 'pjshipped/page',
+    method: 'post',
+    loading: true,
+    data: params
+  })
+}
+
+export function getModel(id) {
+  return request({
+    url: `pjshipped/${id}`,
+    method: 'get'
+  })
+}
+
+export function addModel(params) {
+  return request({
+    url: 'pjshipped',
+    method: 'post',
+    loading: true,
+    data: params
+  })
+}

manager-admin/src/views/dashboard/index.vue

@@ -8,9 +8,16 @@
     <el-divider></el-divider>
     <el-card>
       <div>
-        <b>20240827</b>
+        <b>20241223-wnn</b>
+        <p>- 订单产品加上生产填写图片、发货数量、生产备注、生产填写人可以有多个，而且有填写时间，技术填写人也是如此</p>
+        <p>- 订单产品的发货情况可以多次发货了</p>
+        <p>- 增加了未生产产品统计</p>
+        <p>- 增加了销售能够作废订单后重新生成草稿</p>
+        <p>- 增加了管理员可以修改订单里面的产品，不需要正常订单作废</p>
+        <p>- 增加了订单可以发送钉钉邮件给相关负责人</p>
+        <b>20240827-wnn</b>
         <p>- 增加推广状态，由有效、无效改为有效、无效、待定</p>
-        <b>20231225</b>
+        <b>20231225-allen</b>
         <p>- 草稿详细产品增加了列表展示与导出excel，优化了产品图表流式布局</p>
         <p>- 定单增加了快捷过滤按钮组</p>
         <p>- 定单详细产品增加了列表展示与导出excel，优化了产品图表流式布局</p>

manager-admin/src/views/pjOrder/Edit.vue

@@ -211,41 +211,42 @@
         <pj-receipt :order-no="orderNo"></pj-receipt>
       </el-tab-pane>
       <el-tab-pane label="生产发货情况">
-        <div class="base-info-item">
-          <el-form :model="modelForm" label-width="100px">
-            <el-form-item label="发货人" prop="logistics_name">
-              <el-input v-model="modelForm.logistics_name" :maxlength="20" :disabled="true"></el-input>
-            </el-form-item>
-            <el-form-item label="发货日期" prop="ship_date">
-              <el-date-picker
-                v-model="modelForm.ship_date"
-                align="right"
-                type="date"
-                placeholder="选择日期"
-                :picker-options="{disabledDate(time) { return time.getTime() >= Date.now() }}">
-              </el-date-picker>
-            </el-form-item>
-            <el-form-item label="签收单：" prop="receipt_file" style="width: 90%;text-align: left;" v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0">
-              <el-upload
-                class="avatar-uploader"
-                :action="`${MixinUploadApi}?scene=pjorders`"
-                :on-preview="handlePictureCardPreview"
-                :show-file-list="false"
-                :before-upload="beforeAvatarUpload"
-                :on-success="handleImageSuccess"
-              >
-                <img v-if="modelForm.receipt_file" :src="modelForm.receipt_file" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
-              <el-dialog :visible.sync="dialogImage">
-                <img width="100%" :src="dialogImageUrl" alt="">
-              </el-dialog>
-            </el-form-item>
-            <el-form-item v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0">
-              <el-button type="primary" @click="handleLogisticsSave" class="save">保存</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
+<!--        <div class="base-info-item">-->
+<!--          <el-form :model="modelForm" label-width="100px">-->
+<!--            <el-form-item label="发货人" prop="logistics_name">-->
+<!--              <el-input v-model="modelForm.logistics_name" :maxlength="20" :disabled="true"></el-input>-->
+<!--            </el-form-item>-->
+<!--            <el-form-item label="发货日期" prop="ship_date">-->
+<!--              <el-date-picker-->
+<!--                v-model="modelForm.ship_date"-->
+<!--                align="right"-->
+<!--                type="date"-->
+<!--                placeholder="选择日期"-->
+<!--                :picker-options="{disabledDate(time) { return time.getTime() >= Date.now() }}">-->
+<!--              </el-date-picker>-->
+<!--            </el-form-item>-->
+<!--            <el-form-item label="签收单：" prop="receipt_file" style="width: 90%;text-align: left;" v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0">-->
+<!--              <el-upload-->
+<!--                class="avatar-uploader"-->
+<!--                :action="`${MixinUploadApi}?scene=pjorders`"-->
+<!--                :on-preview="handlePictureCardPreview"-->
+<!--                :show-file-list="false"-->
+<!--                :before-upload="beforeAvatarUpload"-->
+<!--                :on-success="handleImageSuccess"-->
+<!--              >-->
+<!--                <img v-if="modelForm.receipt_file" :src="modelForm.receipt_file" class="avatar">-->
+<!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
+<!--              </el-upload>-->
+<!--              <el-dialog :visible.sync="dialogImage">-->
+<!--                <img width="100%" :src="dialogImageUrl" alt="">-->
+<!--              </el-dialog>-->
+<!--            </el-form-item>-->
+<!--            <el-form-item v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0">-->
+<!--              <el-button type="primary" @click="handleLogisticsSave" class="save">保存</el-button>-->
+<!--            </el-form-item>-->
+<!--          </el-form>-->
+<!--        </div>-->
+        <pj-shipped-list :order-no="orderNo"></pj-shipped-list>
       </el-tab-pane>
       <el-tab-pane label="通用备注">
         <pj-remark-list :table-name="'pj_order'" :table-id="keyId"></pj-remark-list>
@@ -262,6 +263,7 @@ import { RegExp } from '~/ui-utils'
 import pjOrderItems from './OrderItems'
 import pjReceipt from './Receipt'
 import pjRemarkList from './Remark'
+import pjShippedList from './shipped'
 import Storage from '../../utils/storage'
 import * as API_Draft from '@/api/pjDraft'
 import { sendEmail } from '../../api/pjChargePerson'
@@ -269,7 +271,7 @@ import { sendEmail } from '../../api/pjChargePerson'
 export default {
   name: 'pjOrderEdit',
   components: {
-    [UE.name]: UE, pjOrderItems, pjReceipt, pjRemarkList
+    [UE.name]: UE, pjOrderItems, pjReceipt, pjRemarkList, pjShippedList
   },
   data() {
     const checkHtml = (rule, value, callback) => {

manager-admin/src/views/pjOrder/ItemDetail.vue

@@ -1,64 +1,166 @@
 <template>
   <div class="container" v-loading="loading">
-    <div class="base-info-item">
-      <el-form :model="modelForm" :rules="modelFormRule" label-width="100px" ref="modelForm">
-        <el-form-item label="定单号" prop="order_no">
-          <el-tag type="success">{{modelForm.order_no}}</el-tag>
-        </el-form-item>
-        <el-form-item label="要求发货日期" prop="ship_date_required">
-          <el-date-picker
-            v-model="modelForm.ship_date_required"
-            align="right"
-            type="date"
-            :disabled="true"
-            placeholder="选择日期"
-            :picker-options="{disabledDate(time) { return time.getTime() < Date.now() }}">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="产品名称" prop="name">
-          <el-input v-model="modelForm.name" :maxlength="20" :disabled="true"></el-input>
-        </el-form-item>
-        <el-form-item label="产品类型" prop="type">
-          <el-select v-model="modelForm.type" placeholder="请选择" :disabled="true">
-            <el-option label="风尚版" value="风尚版"/>
-            <el-option label="服务器版" value="服务器版"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="生产型号" prop="code">
-          <el-input v-model="modelForm.code" :maxlength="20" :disabled="true"></el-input>
-        </el-form-item>
-        <el-form-item label="货品编码" prop="no">
-          <el-input v-model="modelForm.no" :maxlength="20" :disabled="true"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <img :src="modelForm.image" style="width: 180px;height: 180px;">
-        </el-form-item>
-        <el-form-item label="生产" prop="produce_name">
-          <el-input v-model="modelForm.produce_name" :maxlength="20" :disabled="true"></el-input>
-        </el-form-item>
-        <el-form-item label="状态" prop="produce_status">
-          <el-select placeholder="请选择" v-model="modelForm.produce_status">
-            <el-option value="采购原料中"></el-option>
-            <el-option value="生产中"></el-option>
-            <el-option value="完成"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="技术信息">
-          <div>填写：{{modelForm.tech_name}}</div>
-          <div>硬件版本：{{modelForm.hard_ver}}</div>
-          <div>软件版本：{{modelForm.soft_ver}}</div>
-          <div>备注：{{modelForm.tech_remark}}</div>
-        </el-form-item>
-        <el-form-item label="已生产数量" prop="produced_qty">
-          <el-input v-model="modelForm.produced_qty" :maxlength="20">
-            <template slot="append">共{{modelForm.qty}}</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0">
-          <el-button type="primary" @click="handleSave" class="save">保存</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+    <el-descriptions class="margin-top"  title="订单详情" border :column="2">
+      <el-descriptions-item>
+        <template slot="label">
+          定单号
+        </template>
+        <el-tag type="success">{{modelForm.order_no}}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label">
+          要求发货日期
+        </template>
+        <span v-if="modelForm.ship_date_required">{{MixinUnixToDay(null, null, modelForm.ship_date_required / 1000 , 0)}}</span>
+      </el-descriptions-item>
+
+      <el-descriptions-item>
+        <template slot="label">
+          产品名称
+        </template>
+        <span>{{modelForm.name}}</span>
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label">
+          产品类型
+        </template>
+        <span>{{modelForm.type}}</span>
+      </el-descriptions-item>
+
+      <el-descriptions-item>
+        <template slot="label">
+          生产型号
+        </template>
+        <span>{{modelForm.code}}</span>
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label">
+          货品编码
+        </template>
+        <span>{{modelForm.no}}</span>
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template slot="label">
+          产品图
+        </template>
+        <img :src="modelForm.image" style="width: 120px;height: 120px;" @click="handlePictureCardPreview({ url: modelForm.image})">
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-row>
+      <el-col :span="12">
+        <el-divider>生产情况<el-button v-if="boolFounder || permissions.filter(p => p === 'pjOrderItemsList').length > 0" type="text" icon="el-icon-edit-outline" @click="handleProduceSave">保存</el-button></el-divider>
+        <div v-if="boolFounder || permissions.filter(p => p === 'pjOrderItemsList').length > 0">
+          <el-form :model="modelForm" label-width="100px" ref="modelForm">
+            <el-form-item label="填写人">
+              <span>{{modelForm.produce_name}}</span>
+            </el-form-item>
+            <el-form-item label="填写时间">
+              <span>{{modelForm.produce_time}}</span>
+            </el-form-item>
+            <el-form-item label="生产状态">
+              <el-select placeholder="请选择" v-model="modelForm.produce_status">
+                <el-option value="采购原料中"></el-option>
+                <el-option value="生产中"></el-option>
+                <el-option value="完成"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="已生产量">
+              <el-input v-model="modelForm.produced_qty"><template slot="append">共{{modelForm.qty}}</template></el-input>
+            </el-form-item>
+            <el-form-item label="发货量">
+              <el-input v-model="modelForm.shipped_qty"></el-input>
+            </el-form-item>
+            <el-form-item label="备注">
+              <el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="modelForm.produced_remark"></el-input>
+            </el-form-item>
+            <el-form-item label="生产填写图片">
+              <el-upload :action="`${MixinUploadApi}?scene=pjorders`" list-type="picture-card" :file-list="fileList" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
+                         :on-exceed="handleExceed" :on-success="handleImageSuccess" :limit="1">
+                <i class="el-icon-plus"></i>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div v-else>
+          <el-descriptions class="margin-top"  border :column="2">
+            <el-descriptions-item>
+              <template slot="label">填写人</template>
+              <span>{{modelForm.tech_name}}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">填写时间</template>
+              <span>{{modelForm.produce_time}}</span>
+            </el-descriptions-item>
+
+            <el-descriptions-item>
+              <template slot="label">生产状态</template>
+              <span>{{modelForm.produce_status}}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">已生产量</template>
+              <span>{{modelForm.produced_qty}}</span>
+            </el-descriptions-item>
+
+            <el-descriptions-item>
+              <template slot="label">备注</template>
+              <span>{{modelForm.produced_remark}}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">生产填写图片</template>
+              <img :src="modelForm.produce_img" style="width: 120px;height: 120px;" @click="handlePictureCardPreview({ url: modelForm.produce_img})">
+            </el-descriptions-item>
+          </el-descriptions>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <el-divider>技术情况<el-button v-if="boolFounder || permissions.filter(p => p === 'pjTech').length > 0" type="text" icon="el-icon-edit-outline" @click="handleTechSave">保存</el-button></el-divider>
+        <div v-if="boolFounder || permissions.filter(p => p === 'pjTech').length > 0">
+          <el-form :model="modelForm" label-width="100px" ref="modelForm">
+            <el-form-item label="填写人">
+              <span>{{modelForm.tech_name}}</span>
+            </el-form-item>
+            <el-form-item label="填写时间">
+              <span>{{modelForm.tech_time}}</span>
+            </el-form-item>
+            <el-form-item label="硬件版本">
+              <el-input v-model="modelForm.hard_ver" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="软件版本">
+              <el-input v-model="modelForm.soft_ver" size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="备注">
+              <el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="modelForm.tech_remark"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div v-else>
+          <el-descriptions class="margin-top"  border :column="2">
+            <el-descriptions-item>
+              <template slot="label">填写人</template>
+              <span>{{modelForm.tech_name}}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">硬件版本</template>
+              <span>{{modelForm.hard_ver}}</span>
+            </el-descriptions-item>
+
+            <el-descriptions-item>
+              <template slot="label">软件版本</template>
+              <span>{{modelForm.soft_ver}}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template slot="label">备注</template>
+              <span>{{modelForm.tech_remark}}</span>
+            </el-descriptions-item>
+          </el-descriptions>
+
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-dialog :visible.sync="dialogImage">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
   </div>
 </template>
 
@@ -70,43 +172,16 @@ import Storage from '../../utils/storage'
 export default {
   name: 'pjOrderItemDetail',
   data() {
-    const checkHtml = (rule, value, callback) => {
-      if (value.match(/<[^>]+>/g)) {
-        callback(new Error('产品名称不合法！'))
-      } else {
-        callback()
-      }
-    }
-
-    const checkSn = (rule, value, callback) => {
-      if (!value) {
-        callback(new Error('生产型号/产品编码不能为空'))
-      } else if (!/^[a-zA-Z0-9_\\-]+$/g.test(value)) {
-        callback(new Error('请输入数字、字母、下划线或者中划线'))
-      } else {
-        callback()
-      }
-    }
-
     return {
       boolFounder: JSON.parse(Storage.getItem('admin_user')).founder === 1,
-      permissions: {},
+      permissions: [],
       /** 加载中。。。 */
       loading: false,
-
       keyId: 0,
-
       modelForm: {},
-
-      /** 商品详情的校验规则 */
-      modelFormRule: {
-        name: [
-          { required: true, message: '请输入项目名称', trigger: 'blur' },
-          { whitespace: true, message: '项目名称不可为纯空格', trigger: 'blur' },
-          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
-          { validator: checkHtml }
-        ]
-      }
+      dialogImage: false,
+      dialogImageUrl: null,
+      fileList: []
     }
   },
   mounted() {
@@ -127,40 +202,80 @@ export default {
   methods: {
     getData() {
       API_orderItems.getModel(this.keyId).then(res => {
-        console.log(res)
         this.modelForm = res
         if (this.modelForm.ship_date_required) {
           this.modelForm.ship_date_required *= 1000
         }
+        if (this.modelForm.produce_img) {
+          this.fileList.push({ url: this.modelForm.produce_img })
+        }
+      })
+    },
+    handleTechSave() {
+      const adminUser = JSON.parse(Storage.getItem('admin_user'))
+      this.modelForm.tech_user = adminUser.uid
+      if (this.modelForm.tech_name) {
+        this.modelForm.tech_name = this.modelForm.tech_name + ',' + adminUser.realname
+      } else {
+        this.modelForm.tech_name = adminUser.realname
+      }
+      if (this.modelForm.tech_time) {
+        this.modelForm.tech_time = this.modelForm.tech_time + ',' + Foundation.unixToDate(Math.round(new Date() / 1000))
+      } else {
+        this.modelForm.tech_time = Foundation.unixToDate(Math.round(new Date() / 1000))
+      }
+      API_orderItems.editModelAndStatus(this.modelForm, 1).then(res => {
+        this.$message.success('保存成功！')
       })
     },
-    handleSave() {
-      this.$refs['modelForm'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          console.log(this.modelForm)
-          let _params = {
-            ...this.modelForm
-          }
-          _params.ship_date_required /= 1000
-          console.log(_params)
-
-          const that = this
-          _params.id = this.keyId
-          API_orderItems.editModel(_params).then(response => {
-            that.loading = false
-            that.$message.success('保存成功')
-            that.$route.params.callback()
-            that.$store.dispatch('delCurrentViews', {
-              view: that.$route,
-              $router: that.$router
-            })
-          })
-        } else {
-          this.loading = false
-          this.$message.error('表单中存在未填写或者填写有误的地方,已有错误标示，请检查并正确填写')
+    handleProduceSave() {
+      if (this.modelForm.produced_qty) {
+        if (this.modelForm.produced_qty < 0) {
+          this.$message.error('数量不能小于0！')
+          return
         }
+      }
+      const adminUser = JSON.parse(Storage.getItem('admin_user'))
+      this.modelForm.produce_user = adminUser.uid
+      if (this.modelForm.produce_name) {
+        this.modelForm.produce_name = this.modelForm.produce_name + ',' + adminUser.realname
+      } else {
+        this.modelForm.produce_name = adminUser.realname
+      }
+      if (this.modelForm.produce_time) {
+        this.modelForm.produce_time = this.modelForm.produce_time + ',' + Foundation.unixToDate(Math.round(new Date() / 1000))
+      } else {
+        this.modelForm.produce_time = Foundation.unixToDate(Math.round(new Date() / 1000))
+      }
+      API_orderItems.editModelAndStatus(this.modelForm, 2).then(res => {
+        this.$message.success('保存成功！')
       })
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogImage = true
+    },
+    /** 图片上传之前的校验  */
+    beforeAvatarUpload(file) {
+      const isType = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
+      const isLt1M = file.size / 1024 / 1024 < 3
+      if (!isType) {
+        this.$message.error('上传图片只能是 JPG/JPEG/PNG 格式!')
+      }
+      if (!isLt1M) {
+        this.$message.error('上传图片大小不能超过 3MB!')
+      }
+      return isType && isLt1M
+    },
+    handleExceed(e) {
+      this.$message.error('最多只能上传一个文件！')
+    },
+    /** 文件列表上传成功时的钩子  上传成功校验 */
+    async handleImageSuccess(response, file) {
+      if (file.status === 'success') {
+        // this.$set(this.baseDevice[this.index], 'produce_img', response.url)
+        this.modelForm.produce_img = response.url
+      }
     }
   }
 }

manager-admin/src/views/pjOrder/Items.vue

@@ -33,12 +33,12 @@
             width="55">
           </el-table-column>
           <!--            <el-table-column label="创建时间" :formatter="MixinUnixToDate" prop="create_time" sortable width="160"></el-table-column>-->
-          <el-table-column v-if="params.type !== '2'" label="项目" width="180">
+          <el-table-column v-if="params.type !== '2'" label="项目" min-width="180" show-overflow-tooltip>
             <template slot-scope="scope">
               <el-button round size="mini" @click="gotoOrder(scope.row.order_no)">{{scope.row.order_name}}</el-button>
             </template>
           </el-table-column>
-          <el-table-column label="产品名称" min-width="220">
+          <el-table-column label="产品名称" min-width="220" show-overflow-tooltip>
             <template slot-scope="scope">
               <div class="goods-info">
                 <div class="goods-image" style="margin: 0 20px;">
@@ -52,7 +52,7 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="生产编码" prop="no" width="150">
+          <el-table-column label="生产编码" prop="no" width="130">
             <template slot-scope="scope">
               <el-button round size="mini" @click="gotoGoods(scope.row.good_id)">{{ scope.row.no }}</el-button>
             </template>
@@ -109,12 +109,12 @@
         </div>
         <template slot="table-columns">
           <el-table-column type="index" label="序号" width="55"></el-table-column>
-          <el-table-column label="项目" width="180">
+          <el-table-column label="项目" width="180" show-overflow-tooltip>
             <template slot-scope="scope">
               <el-button round size="mini" @click="gotoOrder(scope.row.order_no)">{{scope.row.order_name}}</el-button>
             </template>
           </el-table-column>
-          <el-table-column label="生产编码" prop="no" width="150">
+          <el-table-column label="生产编码" prop="no" width="150" show-overflow-tooltip>
             <template slot-scope="scope">
               <el-button round size="mini" @click="gotoGoods(scope.row.good_id)">{{ scope.row.no }}</el-button>
             </template>

manager-admin/src/views/pjOrder/OrderItems.vue

@@ -8,10 +8,11 @@
       <el-tab-pane label="图表">
         <el-divider>标准配置</el-divider>
         <el-row :gutter="24" type="flex" style="flex-wrap: wrap; flex-direction: row">
-          <el-col :span="8" v-for="(item, index) in baseDevice" :key="item.id">
+          <el-col :span="12" v-for="(item, index) in baseDevice" :key="item.id">
             <el-card shadow="always">
               <div slot="header" class="clearfix">
                 <el-link @click="() => { $router.push({ path: `/pj/pj-goods-detail/${item.good_id}` }) }">{{ item.name }}</el-link>
+                <el-button v-if="boolFounder" size="mini" @click="changeEdit(item)">修改</el-button>
               </div>
               <div>
                 <div class="param-item">
@@ -28,83 +29,134 @@
                     <div>价格：{{item.price}}</div>
                   </div>
                 </div>
-                <div>{{ item.sales_remark }}</div>
-                <template v-if="boolFounder || permissions.filter(p => p === 'pjTech' || p === 'pjOrderItemsList').length > 0">
-                  <el-divider>技术：
-                    <el-button v-if="boolFounder || permissions.filter(p => p === 'pjTech').length > 0" type="text" icon="el-icon-edit-outline" @click="handleTechSave(item)">保存</el-button>
-                  </el-divider>
-                  <div class="tech_panel" v-if="boolFounder || permissions.filter(p => p === 'pjTech').length > 0">
-                    <div>填写人：{{item.tech_name}}</div>
-                    <div>硬件版本：<el-input v-model="item.hard_ver" size="small"></el-input></div>
-                    <div>软件版本：<el-input v-model="item.soft_ver" size="small"></el-input></div>
-                    <div>备注：<el-input type="textarea" rows="3" placeholder="备注，最大300字" maxlength="300" show-word-limit v-model="item.tech_remark"></el-input></div>
-                  </div>
-                  <div class="tech_panel" v-else>
-                    <div>填写人：{{item.tech_name}}</div>
-                    <div>硬件版本：{{ item.hard_ver }}</div>
-                    <div>软件版本：{{ item.soft_ver }}</div>
-                    <div>备注：{{ item.tech_remark }}</div>
-                  </div>
-                </template>
-                <template v-if="boolFounder || permissions.filter(p => p === 'pjOrderItemsList').length > 0">
-                  <el-divider>生产：
-                    <el-button type="text" icon="el-icon-edit-outline" @click="handleProduceSave(item)">保存</el-button>
-                  </el-divider>
-                  <div class="tech_panel">
-                    <div>填写人：{{item.produce_name}}</div>
-                    <div>填写时间：<span style="font-size: 11px">{{ item.produce_time }}</span></div>
-                    <div @click="clickImg(index)">
-                      <el-upload
-                        :action="`${MixinUploadApi}?scene=pjorders`"
-                        list-type="picture-card"
-                        :on-preview="handlePictureCardPreview"
-                        :before-upload="beforeAvatarUpload"
-                        :on-success="handleImageSuccess"
-                        :limit="1"
-                      >
-                        <i class="el-icon-plus"></i>
-                      </el-upload>
-                    </div>
-                    <div>生产状态：
-                      <el-select placeholder="请选择" v-model="item.produce_status">
-                        <el-option value="采购原料中"></el-option>
-                        <el-option value="生产中"></el-option>
-                        <el-option value="完成"></el-option>
-                      </el-select>
-                    </div>
-                    <div>完成量：<el-input v-model="item.produced_qty">
-                      <template slot="append">共{{item.qty}}</template>
-                    </el-input></div>
-                  </div>
-                </template>
-                <template v-else>
-                  <el-divider>生产情况</el-divider>
-                  <div>填写人：{{item.produce_name}}</div>
-                  <div>填写时间：<span style="font-size: 11px">{{ item.produce_time }}</span></div>
-                  <el-upload
-                    :action="`${MixinUploadApi}?scene=pjorders`"
-                    list-type="picture-card"
-                    :disabled = "true"
-                    :before-upload="beforeAvatarUpload"
-                    :limit="1"
-                  >
-                    <i class="el-icon-plus"></i>
-                  </el-upload>
-                  <div>生产状态：{{item.produce_status}}</div>
-                  <div>完成量：<el-input v-model="item.produced_qty" :disabled="true">
-                    <template slot="append">共{{item.qty}}</template>
-                  </el-input></div>
-                </template>
+                <div class="myFont">{{ item.sales_remark }}</div>
+                <el-row>
+                  <el-col :span="12">
+                    <template v-if="boolFounder || permissions.filter(p => p === 'pjTech' || p === 'pjOrderItemsList').length > 0">
+                      <el-divider>技术：
+                        <el-button type="text" icon="el-icon-edit-outline" @click="handleTechSave(item)">保存</el-button>
+                      </el-divider>
+                      <div class="tech_panel">
+                        <div class="myFont">填写人：
+                          <el-tooltip class="item" effect="dark" :content="item.tech_name" placement="top">
+                            <span style="font-size: 11px">{{item.tech_name}}</span>
+                          </el-tooltip>
+                        </div>
+                        <div class="myFont">填写时间：
+                          <el-tooltip class="item" effect="dark" :content="item.tech_time" placement="top">
+                            <span style="font-size: 11px">{{ item.tech_time }}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>硬件版本：<el-input v-model="item.hard_ver" size="small"></el-input></div>
+                        <div>软件版本：<el-input v-model="item.soft_ver" size="small"></el-input></div>
+                        <div>备注：<el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="item.tech_remark"></el-input></div>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <el-divider>技术：</el-divider>
+                      <div class="tech_panel myFont">
+                        <div class="">填写人：
+                          <el-tooltip class="item" effect="dark" :content="item.tech_name" placement="top">
+                            <span style="font-size: 11px">{{item.tech_name}}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>填写时间：
+                          <el-tooltip class="item" effect="dark" :content="item.tech_time" placement="top">
+                            <span style="font-size: 11px">{{ item.tech_time }}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>硬件版本：<el-tooltip class="item" effect="dark" :content="item.hard_ver" placement="top">
+                          <span style="font-size: 11px">{{item.hard_ver}}</span>
+                        </el-tooltip>
+                        </div>
+                        <div>软件版本：<el-tooltip class="item" effect="dark" :content="item.soft_ver" placement="top">
+                          <span style="font-size: 11px">{{item.soft_ver}}</span>
+                        </el-tooltip></div>
+                        <div>备注：<el-tooltip class="item" effect="dark" :content="item.tech_remark" placement="top">
+                          <span style="font-size: 11px">{{item.tech_remark}}</span>
+                        </el-tooltip></div>
+                      </div>
+                    </template>
+                  </el-col>
+                  <el-col :span="12">
+                    <template v-if="boolFounder || permissions.filter(p => p === 'pjOrderItemsList').length > 0">
+                      <el-divider>生产：
+                        <el-button type="text" icon="el-icon-edit-outline" @click="handleProduceSave(item)">保存</el-button>
+                      </el-divider>
+                      <div class="tech_panel">
+                        <div class="myFont">填写人：
+                          <el-tooltip class="item" effect="dark" :content="item.produce_name" placement="top">
+                            <span style="font-size: 11px">{{item.produce_name}}</span>
+                          </el-tooltip>
+                        </div>
+                        <div class="myFont">填写时间：
+                          <el-tooltip class="item" effect="dark" :content="item.produce_time" placement="top">
+                            <span style="font-size: 11px">{{ item.produce_time }}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>已产量：<el-input v-model="item.produced_qty"><template slot="append">共{{item.qty}}</template></el-input></div>
+                        <div>发货量：<el-input v-model="item.shipped_qty" /></div>
+                        <div>备注：
+                          <el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="item.produced_remark"></el-input>
+                        </div>
+                        <div>生产状态：
+                          <el-select placeholder="请选择" slot="prepend" v-model="item.produce_status">
+                            <el-option value="采购原料中"></el-option>
+                            <el-option value="生产中"></el-option>
+                            <el-option value="完成"></el-option>
+                          </el-select>
+                        </div>
+                        <div @click="clickImg(index)">
+                          <el-upload :action="`${MixinUploadApi}?scene=pjorders`" :file-list="getImg(item.name, item.produce_img)" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
+                                     :on-success="handleImageSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :limit="1">
+                            <el-button v-if="!item.produce_img" size="small" type="primary">点击上传</el-button>
+                          </el-upload>
+                        </div>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <el-divider>生产情况</el-divider>
+                      <div class="tech_panel myFont">
+                        <div>填写人：
+                          <el-tooltip class="item" effect="dark" :content="item.produce_name" placement="top">
+                            <span style="font-size: 11px">{{item.produce_name}}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>填写时间：
+                          <el-tooltip class="item" effect="dark" :content="item.produce_time" placement="top">
+                            <span style="font-size: 11px">{{ item.produce_time }}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>已产量：<el-tooltip class="item" effect="dark" :content="item.produced_qty" placement="top">
+                          <span style="font-size: 11px">{{ item.produced_qty }}</span>
+                        </el-tooltip>件</div>
+                        <div>发货量：<el-tooltip class="item" effect="dark" :content="item.shipped_qty" placement="top">
+                          <span style="font-size: 11px">{{ item.shipped_qty }}</span>
+                        </el-tooltip>件</div>
+                        <div>备注：<el-tooltip class="item" effect="dark" :content="item.produced_remark" placement="top">
+                          <span style="font-size: 11px">{{ item.produced_remark }}</span>
+                        </el-tooltip></div>
+                        <div>生产状态：<span style="font-size: 11px">{{ item.produce_status }}</span></div>
+                        <div @click="clickImg(index)">
+                          <el-upload :action="`${MixinUploadApi}?scene=pjorders`" :file-list="getImg(item.name, item.produce_img)" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
+                                     :on-success="handleImageSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" disabled :limit="1">
+                          </el-upload>
+                        </div>
+                      </div>
+                    </template>
+                  </el-col>
+                </el-row>
               </div>
             </el-card>
           </el-col>
         </el-row>
         <el-divider>其它选配</el-divider>
         <el-row :gutter="24" type="flex" style="flex-wrap: wrap; flex-direction: row">
-          <el-col :span="8" v-for="item in addonDevice" :key="item.id">
+          <el-col :span="12" v-for="item in addonDevice" :key="item.id">
             <el-card shadow="always">
               <div slot="header" class="clearfix">
                 <el-link @click="() => { $router.push({ path: `/pj/pj-goods-detail/${item.good_id}` }) }">{{ item.name }}</el-link>
+                <el-button v-if="boolFounder" size="mini" @click="changeEdit(item)">修改</el-button>
               </div>
               <div>
                 <div class="param-item">
@@ -121,36 +173,123 @@
                     <div>价格：{{item.price}}</div>
                   </div>
                 </div>
-                <div>{{ item.sales_remark }}</div>
-                <template v-if="boolFounder || permissions.filter(p => p === 'pjTech').length > 0">
-                  <el-divider>技术：
-                    <el-button type="text" icon="el-icon-edit-outline" @click="handleTechSave(item)">保存</el-button>
-                  </el-divider>
-                  <div class="tech_panel">
-                    <div>填写人：{{item.tech_name}}</div>
-                    <div>硬件版本：<el-input v-model="item.hard_ver" size="small"></el-input></div>
-                    <div>软件版本：<el-input v-model="item.soft_ver" size="small"></el-input></div>
-                    <div>备注：<el-input type="textarea" rows="3" placeholder="备注，最大300字" maxlength="300" show-word-limit v-model="item.tech_remark"></el-input></div>
-                  </div>
-                </template>
-                <template v-if="boolFounder || permissions.filter(p => p === 'pjOrderItemsList').length > 0">
-                  <el-divider>生产：
-                    <el-button type="text" icon="el-icon-edit-outline" @click="handleProduceSave(item)">保存</el-button>
-                  </el-divider>
-                  <div class="tech_panel">
-                    <div>填写人：{{item.produce_name}}</div>
-                    <div>生产状态：
-                      <el-select placeholder="请选择" v-model="item.produce_status">
-                        <el-option value="采购原料中"></el-option>
-                        <el-option value="生产中"></el-option>
-                        <el-option value="完成"></el-option>
-                      </el-select>
-                    </div>
-                    <div>完成量：<el-input v-model="item.produced_qty">
-                      <template slot="append">共{{item.qty}}</template>
-                    </el-input></div>
-                  </div>
-                </template>
+                <div class="myFont">{{ item.sales_remark }}</div>
+                <el-row>
+                  <el-col :span="12">
+                    <template v-if="boolFounder || permissions.filter(p => p === 'pjTech' || p === 'pjOrderItemsList').length > 0">
+                      <el-divider>技术：
+                        <el-button type="text" icon="el-icon-edit-outline" @click="handleTechSave(item)">保存</el-button>
+                      </el-divider>
+                      <div class="tech_panel">
+                        <div class="myFont">填写人：
+                          <el-tooltip class="item" effect="dark" :content="item.tech_name" placement="top">
+                            <span style="font-size: 11px">{{item.tech_name}}</span>
+                          </el-tooltip>
+                        </div>
+                        <div class="myFont">填写时间：
+                          <el-tooltip class="item" effect="dark" :content="item.tech_time" placement="top">
+                            <span style="font-size: 11px">{{ item.tech_time }}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>硬件版本：<el-input v-model="item.hard_ver" size="small"></el-input></div>
+                        <div>软件版本：<el-input v-model="item.soft_ver" size="small"></el-input></div>
+                        <div>备注：<el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="item.tech_remark"></el-input></div>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <el-divider>技术：</el-divider>
+                      <div class="tech_panel myFont">
+                        <div class="">填写人：
+                          <el-tooltip class="item" effect="dark" :content="item.tech_name" placement="top">
+                            <span style="font-size: 11px">{{item.tech_name}}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>填写时间：
+                          <el-tooltip class="item" effect="dark" :content="item.tech_time" placement="top">
+                            <span style="font-size: 11px">{{ item.tech_time }}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>硬件版本：<el-tooltip class="item" effect="dark" :content="item.hard_ver" placement="top">
+                          <span style="font-size: 11px">{{item.hard_ver}}</span>
+                        </el-tooltip>
+                        </div>
+                        <div>软件版本：<el-tooltip class="item" effect="dark" :content="item.soft_ver" placement="top">
+                          <span style="font-size: 11px">{{item.soft_ver}}</span>
+                        </el-tooltip></div>
+                        <div>备注：<el-tooltip class="item" effect="dark" :content="item.tech_remark" placement="top">
+                          <span style="font-size: 11px">{{item.tech_remark}}</span>
+                        </el-tooltip></div>
+                      </div>
+                    </template>
+                  </el-col>
+                  <el-col :span="12">
+                    <template v-if="boolFounder || permissions.filter(p => p === 'pjOrderItemsList').length > 0">
+                      <el-divider>生产：
+                        <el-button type="text" icon="el-icon-edit-outline" @click="handleProduceSave(item)">保存</el-button>
+                      </el-divider>
+                      <div class="tech_panel">
+                        <div class="myFont">填写人：
+                          <el-tooltip class="item" effect="dark" :content="item.produce_name" placement="top">
+                            <span style="font-size: 11px">{{item.produce_name}}</span>
+                          </el-tooltip>
+                        </div>
+                        <div class="myFont">填写时间：
+                          <el-tooltip class="item" effect="dark" :content="item.produce_time" placement="top">
+                            <span style="font-size: 11px">{{ item.produce_time }}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>已产量：<el-input v-model="item.produced_qty"><template slot="append">共{{item.qty}}</template></el-input></div>
+                        <div>发货量：<el-input v-model="item.shipped_qty" /></div>
+                        <div>备注：
+                          <el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="item.produced_remark"></el-input>
+                        </div>
+                        <div>生产状态：
+                          <el-select placeholder="请选择" slot="prepend" v-model="item.produce_status">
+                            <el-option value="采购原料中"></el-option>
+                            <el-option value="生产中"></el-option>
+                            <el-option value="完成"></el-option>
+                          </el-select>
+                        </div>
+                        <div @click="clickImg(index)">
+                          <el-upload :action="`${MixinUploadApi}?scene=pjorders`" :file-list="getImg(item.name, item.produce_img)" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
+                                     :on-success="handleImageSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :limit="1">
+                            <el-button v-if="!item.produce_img" size="small" type="primary">点击上传</el-button>
+                          </el-upload>
+                        </div>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <el-divider>生产情况</el-divider>
+                      <div class="tech_panel myFont">
+                        <div>填写人：
+                          <el-tooltip class="item" effect="dark" :content="item.produce_name" placement="top">
+                            <span style="font-size: 11px">{{item.produce_name}}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>填写时间：
+                          <el-tooltip class="item" effect="dark" :content="item.produce_time" placement="top">
+                            <span style="font-size: 11px">{{ item.produce_time }}</span>
+                          </el-tooltip>
+                        </div>
+                        <div>已产量：<el-tooltip class="item" effect="dark" :content="item.produced_qty" placement="top">
+                          <span style="font-size: 11px">{{ item.produced_qty }}</span>
+                        </el-tooltip>件</div>
+                        <div>发货量：<el-tooltip class="item" effect="dark" :content="item.shipped_qty" placement="top">
+                          <span style="font-size: 11px">{{ item.shipped_qty }}</span>
+                        </el-tooltip>件</div>
+                        <div>备注：<el-tooltip class="item" effect="dark" :content="item.produced_remark" placement="top">
+                          <span style="font-size: 11px">{{ item.produced_remark }}</span>
+                        </el-tooltip></div>
+                        <div>生产状态：<span style="font-size: 11px">{{ item.produce_status }}</span></div>
+                        <div @click="clickImg(index)">
+                          <el-upload :action="`${MixinUploadApi}?scene=pjorders`" :file-list="getImg(item.name, item.produce_img)" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
+                                     :on-success="handleImageSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" disabled :limit="1">
+                          </el-upload>
+                        </div>
+                      </div>
+                    </template>
+                  </el-col>
+                </el-row>
               </div>
             </el-card>
           </el-col>
@@ -165,19 +304,19 @@
               <el-tag type="info" v-else>配件</el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="code" label="生产型号"></el-table-column>
-          <el-table-column prop="no" label="生产编码"></el-table-column>
-          <el-table-column prop="hard_ver" label="硬件版本"></el-table-column>
-          <el-table-column prop="soft_ver" label="软件版本"></el-table-column>
+          <el-table-column prop="code" show-overflow-tooltip label="生产型号"></el-table-column>
+          <el-table-column prop="no" show-overflow-tooltip label="生产编码"></el-table-column>
+          <el-table-column prop="hard_ver" show-overflow-tooltip label="硬件版本"></el-table-column>
+          <el-table-column prop="soft_ver" show-overflow-tooltip label="软件版本"></el-table-column>
           <el-table-column prop="qty" label="数量" width="100"></el-table-column>
           <el-table-column prop="produced_qty" label="已产数量" width="100"></el-table-column>
-          <el-table-column prop="produced_qty" label="需产产数量" width="100">
+          <el-table-column prop="produced_qty" label="需产数量" width="100">
             <template slot-scope="scope">
               <span>{{ scope.row.qty - scope.row.produced_qty}}</span>
             </template>
           </el-table-column>
           <el-table-column prop="price" label="价格" width="100"></el-table-column>
-          <el-table-column prop="sales_remark" label="销售备注"></el-table-column>
+          <el-table-column prop="sales_remark" show-overflow-tooltip label="销售备注"></el-table-column>
         </el-table>
         <div style="margin-top: 20px">
           <el-button type="primary" @click="outExcel">导出Excel</el-button>
@@ -187,6 +326,14 @@
     <el-dialog :visible.sync="dialogImage">
       <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog>
+    <el-drawer
+      title="设备"
+      :visible.sync="goodsSelectVisible"
+      :append-to-body="true"
+      size="80%"
+    >
+      <goods-select :type="type" :type_base="type_base" @selected="goodsSelect"></goods-select>
+    </el-drawer>
   </div>
 </template>
 
@@ -194,10 +341,12 @@
 import * as API_orderItems from '@/api/pjOrderItems.js'
 import { Foundation } from '~/ui-utils'
 import Storage from '../../utils/storage'
-import { editModelAndStatus } from '../../api/pjOrderItems'
+import goodsSelect from '../goods/goodsSelect.vue'
+import { editModel } from '../../api/pjOrderItems'
 
 export default {
   name: 'pjOrderItems',
+  components: { goodsSelect },
   props: {
     orderNo: {
       type: String,
@@ -211,7 +360,7 @@ export default {
   data() {
     return {
       boolFounder: JSON.parse(Storage.getItem('admin_user')).founder === 1,
-      permissions: {},
+      permissions: [],
       keyId: '',
       params: {
         page_no: 1,
@@ -224,7 +373,10 @@ export default {
       addonDevice: [],
       dialogImage: false,
       dialogImageUrl: '',
-      index: 0
+      changeId: null,
+      index: 0,
+      goodsSelectVisible: false,
+      type_base: true
     }
   },
   mounted() {
@@ -258,6 +410,11 @@ export default {
       } else {
         item.tech_name = adminUser.realname
       }
+      if (item.tech_time) {
+        item.tech_time = item.tech_time + ',' + Foundation.unixToDate(Math.round(new Date() / 1000))
+      } else {
+        item.tech_time = Foundation.unixToDate(Math.round(new Date() / 1000))
+      }
       API_orderItems.editModelAndStatus(item, 1).then(res => {
         this.$message.success('保存成功！')
       })
@@ -323,8 +480,59 @@ export default {
         this.$set(this.baseDevice[this.index], 'produce_img', response.url)
       }
     },
+    handleRemove(e) {
+      setTimeout(() => {
+        this.$set(this.baseDevice[this.index], 'produce_img', null)
+      }, 400)
+    },
+    handleExceed(e) {
+      this.$message.error('最多只能上传一个文件！')
+    },
     clickImg(index) {
       this.index = index
+    },
+    changeEdit(item) {
+      this.changeId = item.id
+      this.type_base = item.type_base
+      this.goodsSelectVisible = true
+    },
+    goodsSelect(list) {
+      if (list.length > 1) {
+        this.$message.error('只能选择一个产品！')
+        return
+      }
+      if (this.listData.findIndex(p => p.good_id === list[0].id) > -1) {
+        this.$message.error('产品已存在！')
+        return
+      }
+      const data = {
+        good_id: list[0].id,
+        name: list[0].name,
+        code: list[0].code,
+        no: list[0].no,
+        image: list[0].image,
+        id: this.changeId
+      }
+      API_orderItems.editModel(data).then(res => {
+        this.$message.success('保存成功！')
+        this.getData()
+      })
+      this.goodsSelectVisible = false
+    },
+    getImg(name, img) {
+      if (img) {
+        return [{ name: name + '备注图', url: img }]
+      } else {
+        return []
+      }
+    },
+    formartLen(str) {
+      console.log('str===', str)
+      if (!str) {
+        return ''
+      } else {
+        return str.length > 20 ? str.substr(0, 20) + '...' : str
+      }
     }
   }
 }
@@ -334,7 +542,7 @@ export default {
 .param-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  //justify-content: space-between;
   padding: 3px;
   font-size: 14px;
 
@@ -361,4 +569,10 @@ export default {
   height: 100px;
   display: block;
 }
+.myFont {
+  overflow: hidden;
+  text-overflow: ellipsis;      //超出部分以省略号显示
+  white-space: nowrap;
+  width: 16em;  //用px单位亦可行
+}
 </style>

manager-admin/src/views/pjOrder/shipped.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="container">
+    <en-table-layout
+      :tableData="tableData.data"
+      :loading="loading"
+    >
+      <div slot="toolbar" class="inner-toolbar">
+        <div v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0" class="toolbar-btns">
+          <el-button type="primary" @click="dialogVisible = true">添加</el-button>
+        </div>
+      </div>
+
+      <template slot="table-columns">
+        <el-table-column label="收货单" width="130">
+          <template slot-scope="scope">
+            <div class="goods-info">
+              <div class="goods-image" style="margin: 0 20px;" @click="handlePictureCardPreview(scope.row.shipped_url)">
+                <el-image :src="scope.row.shipped_url" fit="cover"></el-image>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="发货人" prop="shipped_user" sortable width="170"></el-table-column>
+        <el-table-column label="发货时间" :formatter="MixinUnixToDate" prop="shipped_time" sortable width="170"></el-table-column>
+        <el-table-column label="备注" prop="remark" show-overflow-tooltip min-width="180"></el-table-column>
+      </template>
+
+      <el-pagination
+        v-if="tableData"
+        slot="pagination"
+        @size-change="handlePageSizeChange"
+        @current-change="handlePageCurrentChange"
+        :current-page="tableData.page_no"
+        :page-sizes="[20, 50, 100]"
+        :page-size="tableData.page_size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.data_total">
+      </el-pagination>
+    </en-table-layout>
+
+    <el-dialog title="添加" :visible.sync="dialogVisible">
+      <el-form :model="addModel">
+        <el-form-item label="发货时间" prop="shipped_time">
+          <el-date-picker
+            v-model="addModel.shipped_time"
+            type="datetime"
+            placeholder="请选择时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注：" class="description">
+          <el-input type="textarea" rows="3" placeholder="备注，最大150字" maxlength="150" show-word-limit v-model="addModel.remark"></el-input>
+        </el-form-item>
+        <el-form-item label="发货单">
+          <el-upload class="avatar-uploader"
+                     :action="`${MixinUploadApi}/uploadFile?scene=pjshipped`"
+                     :on-success="uploadSuccess"
+                     :before-upload="handleUploadBefore"
+                     :multiple="false"
+                     :limit="1"
+          >
+            <el-button size="small" type="primary" icon="el-icon-plus avatar-uploader-icon">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传图片，不超过3M</div>
+          </el-upload>
+          <span>{{addModel.shipped_url}}</span>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleAdd">确定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogImage">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as API_Shipped from '@/api/pjShipped'
+import Storage from '../../utils/storage'
+
+export default {
+  name: 'pjRemarkList',
+  props: {
+    orderNo: {
+      type: String,
+      value: ''
+    }
+  },
+  data() {
+    return {
+      boolFounder: JSON.parse(Storage.getItem('admin_user')).founder === 1,
+      permissions: [],
+      /** 列表loading状态 */
+      loading: false,
+      /** 列表参数 */
+      params: {
+        page_no: 1,
+        page_size: 20,
+        sort: 'id',
+        dir: 'desc'
+      },
+      /** 列表数据 */
+      tableData: '',
+      dialogVisible: false,
+      addModel: {},
+      dialogImage: false,
+      dialogImageUrl: ''
+    }
+  },
+  mounted() {
+    if (!this.boolFounder) {
+      this.permissions = JSON.parse(Storage.getItem('permissions'))
+    }
+    this.GET_List()
+  },
+  watch: {
+    orderNo(val) {
+      if (val) {
+        this.GET_List()
+      }
+    }
+  },
+  methods: {
+    /** 分页大小发生改变 */
+    handlePageSizeChange(size) {
+      this.params.page_size = size
+      this.GET_List()
+    },
+
+    /** 分页页数发生改变 */
+    handlePageCurrentChange(page) {
+      this.params.page_no = page
+      this.GET_List()
+    },
+    GET_List() {
+      this.loading = true
+      this.params.fixedCondition = " order_no='" + this.orderNo + "'"
+      API_Shipped.getList(this.params).then(response => {
+        this.loading = false
+        this.tableData = response
+      }).catch(() => (this.loading = false))
+    },
+    handleUploadBefore(file) {
+      let _this = this
+      return new Promise((resolve, reject) => {
+        let hz = file.name
+        _this.fileName = hz
+        let index = hz.lastIndexOf('.')
+        hz = hz.substring(index + 1, hz.length)
+        const isImg = hz === 'jpeg' || hz === 'png' || hz === 'jpg'
+        const isLt5M = file.size / 1024 / 1024 < 3
+        if (!isImg) {
+          _this.$message.error('上传格式错误，仅支持 图片格式')
+          reject()
+        }
+        if (!isLt5M) {
+          _this.$message.error('不能大于3M')
+          reject()
+        }
+        resolve()
+      })
+    },
+    /** 上传成功后的钩子 更换图片 置空存储数组*/
+    async uploadSuccess(response, file) {
+      if (file.status === 'success') {
+        this.addModel.shipped_url = response.url
+      }
+    },
+    handleAdd() {
+      if (!this.addModel.remark) {
+        this.$message.error('必须填写备注')
+        return
+      }
+      if (!this.addModel.shipped_time) {
+        this.$message.error('请选择发货时间')
+        return
+      }
+      this.addModel.shipped_time /= 1000
+      const adminUser = JSON.parse(Storage.getItem('admin_user'))
+      this.addModel.shipped_user = adminUser.realname
+      this.addModel.order_no = this.orderNo
+      API_Shipped.addModel(this.addModel).then(res => {
+        this.$message.success('添加成功')
+        this.dialogVisible = false
+        this.addModel = {}
+        this.GET_List()
+      }).catch()
+    },
+    handlePictureCardPreview(url) {
+      this.dialogImageUrl = url
+      this.dialogImage = true
+    }
+  }
+}
+</script>
+
+<style type="text/scss" lang="scss" scoped>
+/deep/ .el-table td:not(.is-left) {
+  text-align: center;
+}
+
+.inner-toolbar {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.toolbar-search {
+  margin-right: 10px;
+}
+
+.goods-info {
+  display: flex;
+  align-items: center;
+  .goods-image {
+    img {
+      width: 80px;
+      height: 80px;
+    }
+  }
+  .goods-name-box {
+    text-align: left;
+    .goods-name {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+      a:hover {
+        color: #f42424 !important;
+      }
+    }
+  }
+}
+</style>