mdyxgjweb/src/MAR/itemsManage/modules/Add.vue

<template>
  <a-button @click="addClass" :disabled="props.disabled" type="primary" size="samll" class="mr-10">新建</a-button>
  <a-drawer
    ref="drawer"
    v-model:open="modeVisible"
    rootClassName="customNotiveClass"
    placement="right"
    :width="'98%'"
    :closable="false"
    title="新建商品"
    v-if="modeVisible"
    >
    <div class="detail__panel" v-if="modeVisible">
      <a-row :gutter="16">
        <a-col :span="10">
            <a-row>
              <a-card title="设置商品" :bordered="false" style="margin-bottom: 10px;">
                <a-form ref="formRef" :model="form" layout="vertical">
                  <a-row>
                    <a-col :span="24">
                      <a-form-item label="商品名称" name="name" :rules="[{ required: true, message: '请填写商品名称',trigger:'blur'}]">
                        <a-input v-model:value="form.name" ></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="副标题" name="subtitle">
                        <a-input v-model:value="form.subtitle"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="型号" name="model">
                        <a-input v-model:value="form.model"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="标签" name="tag" :rules="[{ min:0,max:8,message: '最大8个字符',trigger:'blur'}]">
                        <a-input v-model:value="form.tag"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="分类" name="class" :rules="[{ required: true, message: '请选择分类',trigger:'blur'}]">
                        <a-select
                          ref="select"
                          :multiple="true"
                          mode="tags"
                          v-model:value="form.class"
                          placeholder="选择分类"
                          style="width: 100%"
                          @change="mxChange"
                        >
                          <a-select-option :value="item.value" v-for="item in classArr()" :key="item.index">{{item.remarks?item.remarks:item.value}}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="类型" name="pricetype" :rules="[{ required: true, message: '请选择类型',trigger:'change'}]">
                        <a-select
                          ref="select"
                          v-model:value="form.pricetype"
                          placeholder="选择类型"
                          style="width: 100%"
                          @change="priceChange"
                        >
                          <a-select-option value="一口价">一口价</a-select-option>
                          <a-select-option value="阶梯价">阶梯价</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="form.pricetype == '一口价'">
                      <a-form-item label="价格（元）" name="price" :rules="[{pattern:/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/,required: true, message: '请输入数字，最多两位小数',trigger:'blur'}]">
                        <a-input v-model:value="form.price"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="form.pricetype == '阶梯价'">
                      <a-form-item label="原价（元）" name="price_original" :rules="[{pattern:/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/,required: true, message: '请输入数字，最多两位小数',trigger:'blur'}]">
                        <a-input v-model:value="form.price_original"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="form.pricetype == '阶梯价'">
                      <a-form-item label="店面最低价（元）" name="price_store" :rules="[{pattern:/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/,required: true, message: '请输入数字，最多两位小数',trigger:'blur'}]">
                        <a-input v-model:value="form.price_store"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="form.pricetype == '阶梯价'">
                      <a-form-item label="总部返利价（元）" name="price_rebate" :rules="[{pattern:/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/,required: true, message: '请输入数字，最多两位小数',trigger:'blur'}]">
                        <a-input v-model:value="form.price_rebate"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="form.pricetype == '阶梯价'">
                      <a-form-item label="定金（元）" name="price_deposit" :rules="[{pattern:/^([1-9][0-9]*)+(\.[0-9]{1,2})?$/,required: true, message: '请输入数字，最多两位小数',trigger:'blur'}]">
                        <a-input v-model:value="form.price_deposit"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="单位" name="unitname">
                        <a-input v-model:value="form.unitname"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="经销商调整" name="canadjust" :rules="[{ required: true, message: '请选择',trigger:'change'}]">
                        <a-radio-group v-model:value="form.canadjust">
                          <a-radio :value="1">允许</a-radio>
                          <a-radio :value="0">禁止</a-radio>
                        </a-radio-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="推荐" name="isnew">
                        <a-checkbox v-model:checked="form.isnew">新品</a-checkbox>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="排序" name="sequence" :rules="[{ pattern:/^[0-9]*$/,message:'请输入整数',trigger:'blur'}]">
                        <a-input v-model:value="form.sequence" ></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="状态" name="isonsale">
                        <a-radio-group v-model:value="form.isonsale">
                          <a-radio :value="0">下架</a-radio>
                          <a-radio :value="1">上架</a-radio>
                        </a-radio-group>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </a-card>

              <a-card title="商品详情" :bordered="false" style="margin: 10px 0;">
                <wangEditor ref="editor" v-model="form.contentstr" :id="form.sa_fadid" style="margin-bottom: 10px"></wangEditor>
              </a-card>

              <a-card :bordered="false" style="margin: 10px 0 50px 0;">
                <template #title>
                  <div class="ant-card-head-title redlitt">图集管理</div>
                </template>
                <AddImg :id="form.sa_fadid" @onSuccess="$refs.table.listData()"></AddImg>
                <normalTable rowKey="sys_attachment_linksid" sequenceKey="linksid" :is-select="false" ref="table" size="small" :columns="utils.TBLayout('imgManageTable')" :param="imgParam">
                  <template #tb_cell="{data}">
                    <template v-if="data.column.dataIndex === 'attinfos'">
                      <a-image v-if="data.record.attinfos.length" :src="data.record.attinfos[0].url" style="width:100px;height: 100px;"></a-image>
                    </template>
                    <template v-else-if="data.column.dataIndex == 'operation'">
                      <CustomButton
                        btnName="删除"
                        idName="20240407135902"
                        keyName="linksids"
                        :id="[data.record.linksid]"
                        type="link"
                        message="确定删除当前资源吗?"
                        @onSuccess="$refs.table.listData()"
                        size="middle"
                      />
                    </template>
                  </template>
                </normalTable>
              </a-card>
            </a-row>
        </a-col>
        <a-col :span="14" style="margin-bottom:60px">
          <a-card title="权限设置" :bordered="false">
            <a-row>
              <span style="width:240px" class="redlitt">浏览权限：（至少选择一个范围）</span>
              <a-col :span="24" style="margin:20px 0 20px 20px;padding-right: 20px;">
                <div class="flex-center mt-10">
                  <span style="width:50px">区域：</span>
                  <SelectModel 
                    ref="selectArea" 
                    @selectRowData="$event => addData('sa_saleareaids',$event,() =>{$refs.areaTable.listData()})" 
                    rowKey="sa_saleareaid" 
                    :param="{'classname': 'webmanage.sale.salearea.salearea',method:'query_area',content:{pageNumber:1,pageSize:20,where:{}}}" 
                    :columns="utils.TBLayout('areaTable')" title="选择区域"
                  >
                    <template v-slot:slot1>
                      <a-button size="middle" type="primary" @click="$refs.selectArea.modeVisible=true">添加</a-button>
                    </template>
                    <template #titleLeft="{data}">
                      <uploadAllData
                        dataType="区域"
                        :total="data.total"
                        @handlePullApi="areaHandlePullApi"
                        @handleUploadApi="areaHandleUploadApi"
                        @onSuccess="$refs.areaTable.listData()"
                      ></uploadAllData>
                    </template>
                  </SelectModel>
                </div>
                <normalTable :is-select="false" ref="areaTable" style="width:100%" size="small" :columns="utils.TBLayout('areaTable')" :param="{id:20240402101802,content:{ownertable:'sa_fad',ownerid:form.sa_fadid,pageNumber:1,pageSize:20,where:{}}}">
                  <template #tb_cell="{data}">
                    <template v-if="data.column.dataIndex === 'operation'">
                      <a-popconfirm
                        title="确认删除当前区域吗?"
                        ok-text="确认"
                        cancel-text="取消"
                        @confirm="delData('sa_saleareaids',data,() =>{$refs.areaTable.listData()})"
                      >
                        <a-button type="link" size="samll">删除</a-button>
                      </a-popconfirm>
                    </template>
                  </template>
                </normalTable>
              </a-col>

              <a-col :span="24" style="margin:0 0 20px 20px;padding-right: 20px">
                <div class="flex-center mt-10">
                  <span style="width:80px">经销商：</span>
                  <SelectModel 
                    ref="selectEnterprise" 
                    @selectRowData="$event => addData('sys_enterpriseids',$event,() =>{$refs.enterpriseTable.listData()})" 
                    rowKey="sys_enterpriseid" 
                    :param="{id:20240312151602,content:{pageNumber:1,pageSize:20,where:{}}}" 
                    :columns="utils.TBLayout('enterpriseTable').splice(0,utils.TBLayout('enterpriseTable').length - 1)" title="选择经销商"
                  >
                    <template v-slot:slot1>
                      <a-button size="middle" type="primary" @click="$refs.selectEnterprise.modeVisible=true">添加</a-button>
                    </template>
                    <template #titleLeft="{data}">
                      <uploadAllData
                        dataType="经销商"
                        :total="data.total"
                        @handlePullApi="enterpriseHandlePullApi"
                        @handleUploadApi="enterpriseHandleUploadApi"
                        @onSuccess="$refs.enterpriseTable.listData()"
                      ></uploadAllData>
                    </template>
                  </SelectModel>
                </div>
                <normalTable :is-select="false" ref="enterpriseTable" style="width:100%" size="small" :columns="utils.TBLayout('enterpriseTable')" :param="{id:20240402101902,content:{ownertable:'sa_fad',ownerid:form.sa_fadid,pageNumber:1,pageSize:20,where:{}}}">
                  <template #tb_cell="{data}">
                    <template v-if="data.column.dataIndex === 'operation'">
                      <a-popconfirm
                        title="确认删除当前经销商吗?"
                        ok-text="确认"
                        cancel-text="取消"
                        @confirm="delData('sys_enterpriseids',data,() =>{$refs.enterpriseTable.listData()})"
                      >
                        <a-button type="link" size="samll">删除</a-button>
                      </a-popconfirm>
                    </template>
                  </template>
                </normalTable>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>

      <div class="fixed__btn__panel">
        <CustomButton @click="submit" type="primary" size="samll" class="mr-10">保 存</CustomButton>
        <a-button @click="modeVisible=false" size="samll" class="mr-10">取 消</a-button>
      </div>
    </div>
  </a-drawer>
  
</template>

<script setup>
import {ref, defineProps, defineEmits,watch, nextTick, onMounted, inject} from 'vue'
import Api from '@/api/api'
import {Cascader} from 'ant-design-vue'
import utils from '@/utils/utils'
import { message, Modal } from 'ant-design-vue';
import { useRouter } from "vue-router";
import AddImg from './addImg.vue'
import normalTable from '@/template/MARnormalTable/index.vue'
import SelectModel from '@/components/selectModel/index2.vue'
import uploadAllData from '@/components/uploadAllData/index.vue'
import WangEditor from '@/components/wangEditor/index.vue'
import { useAuthStore } from '@/stores/modules/auth'

let classArr = inject('classArr')
const router = useRouter()
let emit = defineEmits(['back','onSuccess'])
let props = defineProps(['disabled'])
let formRef = ref()
let modeVisible = ref(false)
let form = ref({
  "sa_fadid": 0,
  "itemid": 0,
  "itemno": "",
  "name": "",
  "subtitle": "",
  "model": "",
  "class": [],
  "pricetype": "一口价",
  "price": "", //
  "price_deposit": "", //定金（元）
  "price_store": "", //店面最低价（元）
  "price_rebate": "", //总部返利价
  "unitname": "",
  "isnew": 0,
  "sequence": 0,
  "contentstr": "",
  "parentid": 0,
  "tag": "",
  "canadjust": 1,
  "isonsale": 1
})

let imgParam = ref({
  "id": "20240407140002",
  "content": {
    "ownertable":'sa_fad',
    "ownerid": '',
    "pageNumber": 1,
    "pageSize": 20,
    "where": {
    }
}
})

watch(() => modeVisible.value,(val) => {
  if (!val) {
    emit('back',form.value.sa_fadid,save.value)
    save.value = false
    refresh()
  }
})

const priceChange = () => {
  if (form.value.pricetype == '一口价') form.value.price_original = ''
  if (form.value.pricetype == '阶梯价') form.value.price = ''
}

//新建
const addClass = async () => {
  modeVisible.value = true
  const res = await Api.requested({
    "id": "20240428154102",
    "content": {
      "sa_fadid": 0,
      "itemid": 0,
      "itemno": "",
      "name": "",
      "subtitle": "",
      "model": "",
      "class": [],
      "pricetype": "一口价",
      "price": "", //
      "price_deposit": "", //定金（元）
      "price_store": "", //店面最低价（元）
      "price_rebate": "", //总部返利价
      "unitname": "",
      "isnew": 0,
      "sequence": useAuthStore().nowAccount.userid+'99999',
      "contentstr": "",
      "parentid": 0,
      "tag": "",
      "canadjust": 1,
      "isonsale": 1
    }
  })
  imgParam.value.content.ownerid = res.data.sa_fadid

  Api.requested({
    classname:'webmanage.sale.salearea.salearea',
    method:'query_area',
    content: {
      pageNumber:1,pageSize:20,where:{}
    }
  }).then(res1 => {
    if (!res1.data.length) return
    Api.requested({
      id:20240402101402,
      content: {
        "ownertable": "sa_fad",
        "ownerid": res.data.sa_fadid,
        "sa_saleareaids": [res1.data[0].sa_saleareaid]
      }
    })
  })

  queryNoticeMain(res.data.sa_fadid)
}

//商品详情
const queryNoticeMain = async (id) => {
  const res = await Api.requested({
    "id": "20240428154202",
    "content": {
      "sa_fadid": id
    }
  })
  form.value = Object.assign({}, form.value, res.data)
  form.value.sequence = ''
  console.log(form.value,'form');
}

let save = ref(false)
let table = ref()
let areaTable = ref()
let enterpriseTable = ref()
//保存
const submit = async () => {
  if (!areaTable.value.data.length && !enterpriseTable.value.data.length) {
    return message.warning('浏览权限至少选择一项！！')
  }
  const values = await formRef.value.validateFields()
  if (!table.value.data.length)return message.warning('图集至少上传一个!!')
  const res = await Api.requested({
    "id": "20240428154102",
    "content": form.value
  })
  utils.message(res,'保存成功',async () => {
    save.value = true
    modeVisible.value = false
  })
}

const addData = async (key,data,callback) => {
  let ids = data.map(item => item[key.slice(0,key.length - 1)])
  const res = await Api.requested({
    "id": "20240402101402",
    "content": {
      "ownertable": "sa_fad",
      "ownerid": form.value.sa_fadid,
      [key]:ids
    }
  })
  if (res.code) {
    callback && callback()
  }
}

//删除数据
const delData = async (key,data,callback) => {
  const res = await Api.requested({
    "id": "20240402101502",
    "content": {
      "ownertable": "sa_fad",
      "ownerid": form.value.sa_fadid,
      [key]:[data.record[key.slice(0,key.length - 1)]]
    }
  })
  utils.message(res,'删除成功',() => {
    callback && callback()
  })
}

//区域全选
const areaHandlePullApi = async (pullApi) => {
  pullApi.content = {pageNumber:1,pageSize:20,where:{}}
  pullApi.classname = 'webmanage.sale.salearea.salearea'
  pullApi.method = 'query_area'
}
const areaHandleUploadApi = async (uploadApi,data) => {
  uploadApi.id = 20240402101402
  uploadApi.content = {
    "ownertable": "sa_fad",
    "ownerid": form.value.sa_fadid,
    "sa_saleareaids": data.map(e=>e.sa_saleareaid)
  }
}

//经销商全选
const enterpriseHandlePullApi = async (pullApi) => {
  pullApi.content = {pageNumber:1,pageSize:20,where:{}}
  pullApi.id = 20240312151602
}
const enterpriseHandleUploadApi = async (uploadApi,data) => {
  uploadApi.id = 20240402101402
  uploadApi.content = {
    "ownertable": "sa_fad",
    "ownerid": form.value.sa_fadid,
    "sys_enterpriseids": data.map(e=>e.sys_enterpriseid)
  }
}

const refresh = () => {
  form.value = {
    "sa_fadid": 0,
    "itemid": 0,
    "itemno": "",
    "name": "",
    "subtitle": "",
    "model": "",
    "class": [],
    "pricetype": "一口价",
    "price": "", //
    "price_deposit": "", //定金（元）
    "price_store": "", //店面最低价（元）
    "price_rebate": "", //总部返利价
    "unitname": "",
    "isnew": 0,
    "sequence": 0,
    "contentstr": "",
    "parentid": 0,
    "tag": "",
    "canadjust": 1,
    "isonsale": 1
  }
}

onMounted(async() => {

})
</script>

<style scoped>
.ant-select {
  width:100%;
}
.ant-divider {
  margin-top: 0 !important;
}
</style>
<style>
.customNotiveClass .ant-drawer-header {
  display: none !important;
}
.customNotiveClass .ant-drawer-content {
  background: #F1F2F3 !important;
}
.customNotiveClass .ant-drawer-body {
  padding: 0 !important;
}
.customNotiveClass .ant-form {
  width: 100%;
}
.detail__panel .ant-card {
  width: 100%;
}
.ant-tree-treenode {
  width:100% !important;
}
.ant-tree-node-content-wrapper {
  width:100% !important;
}
.timeClass .ant-form-item {
  margin-bottom:0px !important;
}
.detail__panel .ant-card-head {
  min-height:35px !important;
}
</style>