|
|
@@ -0,0 +1,330 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-card class="box-card" style="margin: 0 auto;">
|
|
|
+ <div class="refund-item" />
|
|
|
+ </el-card>
|
|
|
+ <el-card class="box-card" style="margin: 10px auto;">
|
|
|
+ <div class="refund-item">
|
|
|
+ <el-form ref="logisticFrom" :model="params" :rules="rules" label-width="120px">
|
|
|
+ <el-row v-for="(logistic,index) in params.transportations" :key="index" :gutter="24" class="box-row">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="快递公司：" :prop="`transportations.${index}.logisticsCompanyName`" :rules="rules.logisticsCompanyName">
|
|
|
+ <el-select v-model="logistic.logisticsCompanyName" style="width:250px;" clearable size="mini" @change="hanldeCompny($event,index)">
|
|
|
+ <el-option value="" label="请选择物流公司" />
|
|
|
+ <el-option v-for="item in kuaiduLisrt" :key="item.id" :label="item.label" :value="item" />
|
|
|
+ </el-select>
|
|
|
+ <el-button v-if="index === 0" type="primary" icon="el-icon-plus" size="mini" style="margin-left: 10px;" @click="hanldeAddlogis(logistic,index)" />
|
|
|
+ <el-button v-if="(index+1) > 1" type="danger" icon="el-icon-minus" size="mini" style="margin-left: 10px;" @click="handeleDelete(index)" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div v-for="(sticsNu,numIndex) in logistic.logisticsNu" :key="numIndex">
|
|
|
+ <el-form-item label="物流编号：" :prop="`transportations.${index}.logisticsNu.${numIndex}.num`" :rules="rules.num">
|
|
|
+ <el-input :key="numIndex" v-model="sticsNu.num" placeholder="请输入物流单号" style="width: 250px" size="mini" />
|
|
|
+ <el-button v-if="numIndex === 0" type="primary" icon="el-icon-plus" size="mini" style="margin-left: 10px;" @click="hanldeAddNumber(logistic,numIndex)" />
|
|
|
+ <el-button v-if="(numIndex+1) > 1" type="danger" icon="el-icon-minus" size="mini" style="margin-left: 10px;" @click="handeleDeleteNumber(logistic,numIndex)" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="24" class="box-row">
|
|
|
+ <el-form-item label="图片备注:" prop="logImage">
|
|
|
+ <div class="form-el-upload" style="width: 148px;height: 148px;">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="actionUrl"
|
|
|
+ :headers="getToken"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus" />
|
|
|
+ </el-upload>
|
|
|
+ <p style="margin: 0;line-height: 20px;font-size: 14px;color: red;">注意：请上传jpg / png格式的图片，最大不超过5M，最多可上传10张</p>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注：" prop="name">
|
|
|
+ <el-input v-model="params.remark" type="textarea" show-word-limit placeholder="请输入备注文字，200字以内" maxlength="200" :autosize="{ minRows: 5, maxRows: 6}" style="width: 600px;" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <div class="filter-container" style="text-align: right;margin-top: 20px;">
|
|
|
+ <el-button plain @click="backToList">取消</el-button>
|
|
|
+ <el-button type="primary" :disabled="disabled" @click="hanldeConfirm('logisticFrom')">确认发货</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { confirmDeliver, deliverShipCompany } from '@/api/order'
|
|
|
+const defaultForm = () => {
|
|
|
+ return {
|
|
|
+ logisticsCompanyCode: '',
|
|
|
+ logisticsCompanyName: '',
|
|
|
+ logisticsNu: [
|
|
|
+ { num: '' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+export default {
|
|
|
+ name: 'AddRemarks',
|
|
|
+ filters: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ params: {
|
|
|
+ images: [], // 发货图片备注
|
|
|
+ orderProducts: [],
|
|
|
+ remark: '',
|
|
|
+ transportations: [
|
|
|
+ {
|
|
|
+ logisticsCompanyCode: '',
|
|
|
+ logisticsCompanyName: '',
|
|
|
+ logisticsNu: [
|
|
|
+ { num: '' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ islogisticsCompany: false,
|
|
|
+ islogisticsNumber: false,
|
|
|
+ productList: [],
|
|
|
+ kuaiduLisrt: [],
|
|
|
+ fileImageList: [], // 上传图片列表
|
|
|
+ rules: {
|
|
|
+ logisticsCompanyName: [{ required: true, message: '请选择物流公司', trigger: 'blur' }],
|
|
|
+ num: [{ required: true, message: '请输入物流单号', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getToken() {
|
|
|
+ return {
|
|
|
+ 'token': this.$store.getters.token
|
|
|
+ }
|
|
|
+ },
|
|
|
+ actionUrl() {
|
|
|
+ return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
|
|
|
+ },
|
|
|
+ orderId: function() {
|
|
|
+ return this.$route.query.orderId * 1
|
|
|
+ },
|
|
|
+ disabled() {
|
|
|
+ return this.params.transportations[0] === ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (this.$route.query.products) {
|
|
|
+ this.params.orderProducts = JSON.parse(this.$route.query.products)
|
|
|
+ }
|
|
|
+ this.deliverShipCompany()
|
|
|
+ console.log('productList', this.params.orderProducts)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 付款单详情
|
|
|
+ async deliverShipCompany() {
|
|
|
+ try {
|
|
|
+ const res = await deliverShipCompany()
|
|
|
+ console.log('res', res)
|
|
|
+ this.kuaiduLisrt = res.data
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择物流公司
|
|
|
+ hanldeCompny(value, index) {
|
|
|
+ console.log('value', value)
|
|
|
+ this.params.transportations[index].logisticsCompanyName = value.label
|
|
|
+ this.params.transportations[index].logisticsCompanyCode = value.value
|
|
|
+ this.islogisticsCompany = false
|
|
|
+ },
|
|
|
+ // 添加一条物流公司
|
|
|
+ hanldeAddlogis() {
|
|
|
+ this.params.transportations.push(defaultForm())
|
|
|
+ },
|
|
|
+ // 删除 一条物流公司
|
|
|
+ handeleDelete(index) {
|
|
|
+ this.params.transportations.splice(index, 1)
|
|
|
+ },
|
|
|
+ // 添加物流单号
|
|
|
+ hanldeAddNumber(logistic, num, numIndex) {
|
|
|
+ logistic.logisticsNu.push({ num: '' })
|
|
|
+ },
|
|
|
+ // 删除一条物流编号
|
|
|
+ handeleDeleteNumber(logistic, numIndex) {
|
|
|
+ logistic.logisticsNu.splice(numIndex, 1)
|
|
|
+ },
|
|
|
+ checkedParams() { // 校验参数信息
|
|
|
+ const _this = this
|
|
|
+ this.params.transportations.forEach(function(pros) {
|
|
|
+ pros.logisticsNu.forEach(function(item) {
|
|
|
+ const transpor = {
|
|
|
+ logisticsCompanyCode: pros.logisticsCompanyCode,
|
|
|
+ logisticsCompanyName: pros.logisticsCompanyName,
|
|
|
+ num: item.num
|
|
|
+ }
|
|
|
+ if (transpor.logisticsCompanyCode === '' && transpor.logisticsCompanyName === '') {
|
|
|
+ _this.islogisticsCompany = true
|
|
|
+ } else {
|
|
|
+ _this.islogisticsCompany = false
|
|
|
+ }
|
|
|
+ if (transpor.num === '') {
|
|
|
+ console.log('1111111111')
|
|
|
+ _this.islogisticsNumber = true
|
|
|
+ } else {
|
|
|
+ _this.islogisticsNumber = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hanldeConfirm(formName) {
|
|
|
+ // 保存编辑
|
|
|
+ // this.checkedParams()
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.fileImageList.forEach((image) => {
|
|
|
+ this.params.images.push(image.response.data)
|
|
|
+ })
|
|
|
+ this.confirmDeliver(this.params)
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async confirmDeliver(params) {
|
|
|
+ try {
|
|
|
+ await confirmDeliver(params)
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ this.backToList()
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上传图片事件
|
|
|
+ handleSuccess(res, file, fileList) {
|
|
|
+ this.fileImageList = fileList
|
|
|
+ console.log('images', this.fileImageList)
|
|
|
+ },
|
|
|
+ // 删除图片事件
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ this.fileImageList = fileList
|
|
|
+ console.log('images', this.fileImageList)
|
|
|
+ },
|
|
|
+ reloadImage() {
|
|
|
+ this.loadImgLoading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
|
|
|
+ }, 1000 * 2)
|
|
|
+ },
|
|
|
+ loadSucess() {
|
|
|
+ this.loadImgLoading = false
|
|
|
+ },
|
|
|
+ backToList() {
|
|
|
+ this.$store.dispatch('tagsView/delView', this.$route).then(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$router.replace({
|
|
|
+ path: '/order/list'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .app-title{
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #409EFF;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .box-card{
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .box-row{
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .box-row .dropdown{
|
|
|
+ margin-top: -10px;
|
|
|
+ }
|
|
|
+ .refund-item{
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .order-item{
|
|
|
+ background:#f7f7f7;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .product-row{
|
|
|
+ padding: 10px 0;
|
|
|
+ background: #EBEEF5;
|
|
|
+ border-top: 1px dashed #DCDFE6;
|
|
|
+ }
|
|
|
+ .avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+ }
|
|
|
+ .avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ line-height: 148px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .avatar {
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .avatar img {
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .el-form-item__label{
|
|
|
+ text-align: right !important;
|
|
|
+ }
|
|
|
+ .el-upload__tip{
|
|
|
+ line-height: 20px;
|
|
|
+ color: red;
|
|
|
+ text-align: left;
|
|
|
+ position: absolute;
|
|
|
+ right: -50%;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .span_tip{
|
|
|
+ font-size: 12px;
|
|
|
+ color: red;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .filter-item-temp{
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ .op-item{
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+ .el-span-warning{
|
|
|
+ color: #E6A23C;
|
|
|
+ }
|
|
|
+ .el-span-success{
|
|
|
+ color: #67C23A;
|
|
|
+ }
|
|
|
+ .el-span-danger{
|
|
|
+ color: #F56C6C;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
