zfire-newmall-admin/src/views/secondHandMall/commodityManagement/form.vue

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" :form-data="formData" :form-rules="formRules">
        <zj-form-module title="商品详情" :form-data="formData" :form-items="formItems" label-width="80px">
        </zj-form-module>
        <zj-form-module title="出售信息" class="my-module" :form-data="formData.order" :form-items="formItems2"
          label-width="0px"/>
          <zj-form-module title="查看留言" class="my-module" :form-data="formData.order" :form-items="formItems3"
          label-width="0px"/>
      </zj-form-container>
    </zj-page-fill>
    <div style="box-sizing: border-box; padding: 10px; text-align: right;">
      <el-button type="primary" size="small" @click="handleSubmit">保存</el-button>
      <el-button v-if="formData.id && ~['SALE'].indexOf(formData.status)" type="primary" size="small"
        @click="copyGoods">克隆商品</el-button>
      <el-button v-if="formData.id && ~['ON'].indexOf(formData.status)" type="primary" size="small"
        @click="setStatus('OFF')">下架</el-button>
      <el-button v-if="formData.id && ~['ON', 'OFF'].indexOf(formData.status)" type="primary" size="small"
        @click="zhuanxiaoshou">转销售</el-button>
      <el-button v-if="formData.id && ~['OFF'].indexOf(formData.status)" type="primary" size="small"
        @click="setStatus('ON')">重新上架</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </div>
  </zj-page-container>
</template>

<script>
import ImageUpload from '@/components/Common/image-upload.vue'
import { esGoodsDetail, esGoodsCopy, esGoodsBatchUpdateStatus, esGoodsReply } from '@/api/commodityManagement'
export default {
  components: { ImageUpload },
  props: {
    detailId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {
        "brand": "",
        "categoryId": "",
        "categoryName": "",
        "companyWechatId": "",
        "companyWechatName": "",
        "del": true,
        "goodsName": "",
        "goodsNote": "",
        "imgList": [],
        "isTop": true,
        "likeCount": 0,
        "makeDate": "",
        "mark": "",
        "markId": "",
        "messageList": [],
        "operateRecordList": [],
        "power": "",
        "price": 0,
        "qty": 0,
        "queryCount": 0,
        "remark": "",
        "sort": 0,
        "status": "",
        "topTime": "",
        "userId": ""
      },
      formRules: {},
      publishStatus: [
        { label: '下架', value: "OFF" },
        { label: '上架', value: "ON" },
        { label: '已卖出', value: "SALE" },
      ],
    }
  },
  computed: {
    disabled(){
      return this.detailId? !~['ON', 'OFF'].indexOf(this.formData?.status) : false
    },
    formItems() {
      return [
        {
          name: 'el-input',
          md: 12,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品分类', prop: 'categoryName' }
        },
        {
          name: 'el-radio',
          options: this.publishStatus,
          attributes: { disabled: this.disabled },
          md: 12,
          formItemAttributes: { label: '发布状态', prop: 'status' }
        },
        {
          name: 'el-input',
          md: 12,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品名称', prop: 'goodsName' }
        },
        {
          name: 'el-input',
          md: 12,
          attributes: { disabled: this.disabled, type: 'textarea' },
          formItemAttributes: { label: '商品描述', prop: 'goodsNote' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品价格', prop: 'price' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '上架数量', prop: 'qty' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品品牌', prop: 'brand' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '功率(W)', prop: 'power' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '制造日期', prop: 'makeDate' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '联系电话', prop: 'linkPhone' }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true },
          formItemAttributes: { label: '点赞量', prop: 'likeCount' }
        },
        {
          name: 'slot-component',
          md: 6,
          attributes: { disabled: true, placeholder: '' },
          formItemAttributes: { label: '留言量', prop: '' },
          render: (h, { props }) => {
            return (
              <el-input
                value={Number(this.formData?.messageList?.length)}
                disabled={true}
                size="mini"
                placeholder=""
              ></el-input>
            )
          },
        },
        {
          name: 'el-radio',
          options: [
            { label: '一级能效', value: "一级能效" },
            { label: '二级能效', value: "二级能效" },
            { label: '三级能效', value: "三级能效" },
            { label: '四级能效', value: "四级能效" },
            { label: '五级能效', value: "五级能效" },
          ],
          md: 24,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '能效标识', prop: 'mark' }
        },
        {
          name: 'slot-component',
          md: 24,
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品图片', prop: 'imgList' },
          render: (h, { props }) => {
            return (<div>
              <ImageUpload file-list={this.formData.imgList} limit={this.formData?.imgList?.length + 1} isEdit={false} />
            </div>)
          }
        },
      ]
    },
    formItems2() {
      return [{
        name: 'slot-component',
        md: 24,
        attributes: { disabled: this.disabled },
        formItemAttributes: { label: '', prop: '', 'label-width': '0px' },
        render: (h, { props }) => {
          var { formData } = props
          console.log(formData, 999)
          return (<div>
            <el-row gutter={10}>
              <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
                <div class='info'>
                  <div class='info_title'>上架人信息</div>
                  <div class='info_bottom'>
                    <div class='info_bottom_lt'>
                      <el-image
                        style='width: 40px; height: 40px'
                        src={this.$imageUrl + this.formData?.order?.buyerUserPic}
                      >
                      </el-image>
                    </div>
                    <div class='info_bottom_rt'>
                      <div>微信昵称：{formData.userName}</div>
                      <div>微信手机号：{formData.phone}</div>
                      <div>发布时间：{formData.goodsCreateTime}</div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
                <div class='info'>
                  <div class='info_title'>买家信息</div>
                    <div class='info_bottom'>
                      <div class='info_bottom_lt'>
                        <el-image
                          style='width: 40px; height: 40px'
                          src={this.$imageUrl + this?.formData?.userPic}
                        >
                        </el-image>
                      </div>
                      <div class='info_bottom_rt'>
                        <div>微信昵称：{formData.buyerUserName}</div>
                        <div>微信手机号：{formData.buyerUserPhone}</div>
                        <div>收货人信息：{formData.consigneeName}</div>
                        <div>收货人地址：{formData.address}</div>
                        <div>支付方式：{formData.payType === 'WECHAT' ? '微信支付' : ''}</div>
                      </div>
                    </div>
                </div>
              </el-col>
              <el-col xs={24} sm={24} md={8} lg={8} xl={8}>
                <div class='info'>
                  <div class='info_title'>物流信息</div>
                  <div class='info_bottom'>
                    <div class='info_bottom_rt'>
                      <div>
                        <el-radio-group value={formData.logisticsType}>
                          <el-radio label='SELF'>自提</el-radio>
                          <el-radio label='DELIVERY'>物流</el-radio>
                        </el-radio-group>
                      </div>
                      <div>快递单号：{formData.logisticsNum}</div>
                      <div>快递公司：{formData.logisticsName}</div>
                      <el-button type='primary' size='small' onClick={() => { }}
                      >查看物流
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>)
        }
      }]
    },
    formItems3() {
      return [{
        name: 'slot-component',
        md: 24,
        attributes: { disabled: this.disabled },
        formItemAttributes: { label: '', prop: 'messageList', 'label-width': '0px' },
        render: (h, { props }) => {
          var { formData } = props
          return <div>
            <zj-table
              columns={[
                {
                  columnAttributes: {
                    label: '留言人名称',
                    prop: 'createBy'
                  }
                },
                {
                  columnAttributes: {
                    label: '留言内容',
                    prop: 'content'
                  }
                },
                {
                  columnAttributes: {
                    label: '留言时间',
                    prop: 'createTime'
                  }
                },
                {
                  columnAttributes: {
                    label: '回复人名称',
                    prop: 'replyBy'
                  }
                },
                {
                  columnAttributes: {
                    label: '回复内容',
                    prop: 'replyContent'
                  }
                },
                {
                  columnAttributes: {
                    label: '回复时间',
                    prop: 'replyTime'
                  }
                },
                {
                  columnAttributes: {
                    label: '操作',
                  },
                  render: (h, { row, column, index }) => {
                    return <div style="padding-left:10px">
                      <el-button type="text" onClick={() => {this.msgSend(row)}}>回复</el-button>
                    </div>
                  }
                }
              ]}
              tableData={this.formData.messageList}>
            </zj-table>
          </div>
        }
      }]
    },
  },
  watch: {
    detailId: {
      handler(newVal, oldVal) {
        if (!newVal) {
          return
        }
        esGoodsDetail({ id: newVal }).then(res => {
          console.log(res.data)
          this.formData = {
            ...res.data,
            imgList: res.data.imgList.map(item => {
              return {
                ...item,
                imgUrl: item.imgUrl
              }
            })
          }
        })
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    msgSend(row){
      this.$prompt('留言回复', '回复', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: "textarea"
      }).then(({ value }) => {
        if(value){
          esGoodsReply({
            id:this.detailId,
            messageId:row.id,
            content:value
          }).then(res => {
            this.$message({ type: 'success', message: `设置成功!` })
            esGoodsDetail({ id: this.detailId }).then(res2 => {
              this.formData = {
                ...res2.data,
                imgList: res2.data.imgList.map(item => {
                  return {
                    ...item,
                    imgUrl: item.imgUrl
                  }
                })
              }
            })
          })
        }
      })
    },
    copyGoods() {
      esGoodsCopy({ id: this.detailId.id }).then(res => {
        this.$message({ type: 'success', message: `克隆成功!` })
        this.handleClose()
      })
    },
    setStatus(status){
      esGoodsBatchUpdateStatus({ ids: this.detailId.id,status:status }).then(res => {
        this.$message({ type: 'success', message: `设置成功!` })
        this.handleClose()
      })
    },
    zhuanxiaoshou(){
      
    },
    handleSubmit() {

    },
    handleClose() {
      this.$emit('back')
    }
  }
}
</script>

<style lang="scss">
.info {
  .info_title {
    font-size: 16px;
    font-weight: 700;
  }

  .info_bottom {
    display: flex;
    margin: 10px 0;

    .info_bottom_lt {
      width: 40px;
      height: 40px;
    }

    .info_bottom_rt {
      padding: 0 0 0 10px;
      line-height: 30px;

      .photoPZ {
        display: inline-block;
        vertical-align: text-top;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep &>.zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    &>div:nth-child(1) {
      margin-top: 20px;
    }
  }
}

.header1style {
  text-align: right;
  font-size: 12px;
  color: red;
  line-height: 18px;
}

.my-module {
  ::v-deep .el-form-item__content {
    margin-left: 12px !important;
  }
}
</style>