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 v-if="!disabled" 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, esGoodsUpdate } from '@/api/commodityManagement'
import { getClassifyList } from '@/api/goods'
export default {
  components: { ImageUpload },
  props: {
    detailId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      classifyList: [],
      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" },
      ],
      cpdata:{},
    }
  },
  computed: {
    disabled(){
      return ~['ON', 'OFF'].indexOf(this.cpdata?.status) ? false : true
    },
    formItems() {
      return [
        {
          name: 'el-select',
          md: 12,
          options: this.classifyList.map(item=>({label: item.name,value: item.categoryId})),
          attributes: { disabled: this.disabled },
          formItemAttributes: { label: '商品分类', prop: 'categoryId' },
          events: {
            change: (val) => {
              this.formData.categoryName = this.classifyList.find(item=>item.categoryId == val)?.name
            }
          }
        },
        {
          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' }
        },
        {
          md: 24,
          name: 'slot-component',
          formItemAttributes: {
            label: '商品图片',
            prop: 'imgList',
            rules: []
          },
          render: (h, { props, onInput }) => {
            return (
              <ImageUpload fileList={this.formData.imgList} limit={100} isEdit={!this.disabled}/>
            )
          }
        }
      ]
    },
    // esOrderInfo
    formItems2 () {
      return [{
        name: 'slot-component',
        md: 24,
        attributes: { disabled: this.disabled },
        formItemAttributes: { label: '', prop: '', 'label-width': '0px' },
        render: (h, { props }) => {
          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?.formData?.esOrderInfo?.sellUrl}
                      >
                      </el-image>
                    </div>
                    <div class='info_bottom_rt'>
                      <div>微信昵称：{this?.formData?.esOrderInfo?.sellName}</div>
                      <div>微信手机号：{this?.formData?.esOrderInfo?.sellMobile}</div>
                      <div>发布时间：{this?.formData?.esOrderInfo?.sellTime}</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?.formData?.esOrderInfo?.wechatUserUrl}
                        >
                        </el-image>
                      </div>
                      <div class='info_bottom_rt'>
                        <div>微信昵称：{this?.formData?.esOrderInfo?.wechatUserName}</div>
                        <div>微信手机号：{this?.formData?.esOrderInfo?.wechatUserMobile}</div>
                        <div>收货人信息：{`(${this?.formData?.esOrderInfo?.userMobile||''}) ${this?.formData?.esOrderInfo?.userMobile||''}`}</div>
                        <div>收货人地址：{this?.formData?.esOrderInfo?.sellName}</div>
                        <div>支付方式：{({WECHAT:"微信支付", CASH:"到店支付", TRANSFER:"转账支付"})[this?.formData?.esOrderInfo?.payType]}</div>
                      </div>
                    </div>
                </div>
              </el-col>
              {~['SEND','OVER'].indexOf(this?.formData?.esOrderInfo?.status)?<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 disabled={true} value={this?.formData?.esOrderInfo?.logisticsType}>
                          <el-radio label='SELF'>自提</el-radio>
                          <el-radio label='DELIVERY'>物流</el-radio>
                        </el-radio-group>
                      </div>
                      <div>快递单号：{this?.formData?.esOrderInfo?.logisticsNo}</div>
                      <div>快递公司：{this?.formData?.esOrderInfo?.logisticsName}</div>
                      <el-button type='primary' size='small' onClick={() => { 
                        this.$router.push({
                          name: 'orderManagement',
                          params: {
                            pageName: this?.formData?.esOrderInfo?.esOrderId,
                            pageType: 'materialFlow',
                            pageCode: this?.formData?.esOrderInfo?.esOrderId,
                          },
                        })
                      }}>查看物流
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-col>:null}
            </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 => {
          this.formData = {
            ...res.data,
            imgList: res.data.imgList.map(item => {
              return {
                ...item,
                url: item.imgUrl
              }
            })
          }
          this.cpdata = JSON.parse(JSON.stringify(res.data))
        })
      },
      deep: true,
      immediate: true,
    }
  },
  created(){
    getClassifyList({
      status:true,
      type:5
    }).then(res=>{
      this.classifyList = res.data
    })
  },
  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,
                    url: item.imgUrl
                  }
                })
              }
            })
          })
        }
      })
    },
    copyGoods() {
      esGoodsCopy({ id: this.detailId }).then(res => {
        this.$message({ type: 'success', message: `克隆成功!` })
        this.$emit('back',{detailId:res.data})
      })
    },
    setStatus(status){
      esGoodsBatchUpdateStatus({ ids: this.detailId, status:status }).then(res => {
        this.$message({ type: 'success', message: `设置成功!` })
        this.handleClose()
      })
    },
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          esGoodsUpdate({
            ...this.formData,
            imgList: this.formData.imgList.map(item=>({...item, imgUrl:item.url}))
          }).then(res=>{
            this.$message({ type: 'success', message: `成功!` })
            this.$emit('back')
          })
        }
      });
    },
    handleClose() {
      this.$emit('back')
    },
    zhuanxiaoshou(){
      this.$router.push({
        name: 'orderManagement',
        params: {
          pageName: this.detailId,
          pageType: 'add',
          pageCode: this.detailId,
        },
      })
    }
  }
}
</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>