crm_extend/src/pages/indent-manage/indent/edit.vue

<template>
  <div class="component-edit-indent">
    <el-dialog
      v-model="show"
      class="custom-edit-indent-dialog"
      :title="
        visible === 1
          ? $t(prefix_edit + 'title_add')
          : $t(prefix_edit + 'title_edit')
      "
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="close"
      width="960px"
    >
      <el-form
        ref="indentForm"
        :rules="rules"
        :model="form"
        label-width="130px"
      >
        <div class="edit-indent-form flex flex-wrap items-center">
          <el-form-item
            :label="$t(prefix + 'label_customer_name')"
            prop="custom_name"
          >
            <el-select
              v-model="form.custom_name"
              style="width: 100%"
              :placeholder="$t('text_please_select')"
              :remote-method="debounce(getCustomListFun, 500)"
              :loading="loading"
              remote
              filterable
              @change="customChange"
            >
              <!-- allow-create -->
              <el-option
                v-for="(option, index) in customList"
                :key="option.id || index"
                :label="option.name"
                :value="option.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t(prefix + 'label_project_name')">
            <el-input v-model="form.deal_name"></el-input>
          </el-form-item>
          <el-form-item
            label="SKU"
            style="height: 40px"
          >
            <!-- <el-input
              style="display: none"
              v-model="form.product_sku"></el-input> -->
            <div
              class="el-input el-input__wrapper el-input__inner fake-sku-input"
              @click="skuSelectVisible = true"
            >
              {{ form.product_sku }}
            </div>
          </el-form-item>
          <el-form-item
            :label="$t(prefix + 'label_product_name')"
            prop="product_name"
          >
            <el-input
              v-model="form.product_name"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t(prefix + 'label_require_material')"
            prop="require_material"
          >
            <div
              class="flex justify-between items-center"
              style="width: 100%"
            >
              <el-select v-model="form.require_material">
                <el-option
                  v-for="item in materialOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-input
                v-if="form.require_material === '其它'"
                v-model.trim="form.require_material_other"
                placeholder="选其它时必填"
                style="width: 45%"
              ></el-input>
            </div>
          </el-form-item>

          <el-form-item
            :label="$t(prefix + 'label_category')"
            prop="product_category"
          >
            <div
              class="flex justify-between items-center"
              style="width: 100%"
            >
              <el-select v-model="form.product_category">
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-input
                v-if="form.product_category === '其它'"
                v-model.trim="form.product_category_other"
                placeholder="选其它时必填"
                style="width: 45%"
              ></el-input>
            </div>
          </el-form-item>

          <el-form-item
            :label="$t(prefix + 'label_print_method')"
            prop="print_method"
          >
            <div
              class="flex justify-between items-center"
              style="width: 100%"
            >
              <el-select v-model="form.print_method">
                <el-option
                  v-for="item in printOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-input
                v-if="form.print_method === '其它'"
                v-model.trim="form.print_method_other"
                placeholder="选其它时必填"
                style="width: 45%"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item :label="$t(prefix_edit + 'label_print_require')">
            <el-input v-model="form.require_print"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t(prefix_edit + 'label_number')"
            prop="require_amount"
          >
            <el-input v-model="form.require_amount"></el-input>
          </el-form-item>
          <el-form-item :label="$t(prefix_edit + 'label_deliver_date')">
            <el-date-picker
              v-model="form.due_date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item :label="$t(prefix_edit + 'label_ref_dimension')">
            <el-input
              v-model="form.ref_size_length"
              style="width: 50px"
              placeholder="长"
            ></el-input>
            <span>&nbsp;*&nbsp;</span>
            <el-input
              v-model="form.ref_size_width"
              style="width: 50px"
              placeholder="宽"
            ></el-input>
            <span>&nbsp;*&nbsp;</span>
            <el-input
              v-model="form.ref_size_height"
              style="width: 50px"
              placeholder="高"
            ></el-input>
            <span>&nbsp;CM</span>
          </el-form-item>
          <el-form-item
            :label="$t(prefix_edit + 'label_ref_url')"
            style="width: 98%"
          >
            <el-input v-model="form.ref_url"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t(prefix_edit + 'label_comment')"
            style="width: 98%"
          >
            <el-input
              v-model="form.other_note"
              type="textarea"
              :rows="3"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t(prefix_edit + 'label_ref_image')"
            style="width: 100%"
          >
            <image-upload
              v-model:list="imageList"
              :disable-preview="true"
            ></image-upload>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-table
              v-show="quoteList.length"
              :data="quoteList"
              border
              stripe
            >
              <el-table-column
                width="200"
                :label="$t(prefix_edit + 'col_product_image')"
              >
                <template #default="scope">
                  <div v-if="scope.row.product_image.length">
                    <img
                      :src="scope.row.product_image[0]"
                      style="width: 100%; height: auto"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                prop="vendor_name"
                :label="$t(prefix_edit + 'col_supplier')"
              ></el-table-column>
              <el-table-column
                prop="product_url"
                label="URL"
              ></el-table-column>
            </el-table>
            <el-button
              type="warning"
              size="small"
              @click="addInfo"
            >
              + {{ $t(prefix_edit + 'btn_add_info') }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="flex justify-center items-center">
          <el-button
            size="small"
            type="primary"
            @click="checkForm(indentForm)"
          >
            {{ $t('btn_submit') }}
          </el-button>
          <el-button
            size="small"
            type="primary"
            @click="checkForm(indentForm, false)"
          >
            {{ $t(prefix_edit + 'btn_submit_and_next') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <editInfo
      v-model:visible="infoVisible"
      @create="quotaCreated"
    ></editInfo>
    <sku-select
      v-model:visible="skuSelectVisible"
      @select="selectSku"
    ></sku-select>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch, nextTick, inject } from 'vue'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElTable,
  ElTableColumn,
  ElSelect,
  ElOption,
  ElDialog,
  ElNotification,
  ElDatePicker,
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import cloneDeep from 'lodash.clonedeep'
import dayjs from 'dayjs'
import debounce from 'lodash.debounce'
import ImageUpload from '@/components/ImageUpload.vue'
import editInfo from './components/info.vue'

import skuSelect from './components/skuSelect.vue'
import { $t } from '@/i18n/index'
import { getCustomList, createIndent } from '@/api/indent'

defineComponent({
  name: 'EditIndent',
})
const {
  visible = 0,
  quotaData = {} as any,
  indentData = {} as any,
  categoryOptions = [],
  printOptions = [],
  materialOptions = [],
} = defineProps<{
  visible: number
  // 引用数据. 没有拼错, 不是quote询价信息列表. 这个数据是‘引用’业务克隆出来的, 虽然最终也会赋值给quoteList
  quotaData: object
  indentData: object
  categoryOptions: any[]
  printOptions: any[]
  materialOptions: any[]
}>()
watch(
  () => visible,
  () => {
    show.value = visible > 0
    if (visible > 0) {
      resetData()
    }
    if (visible === 1 && quotaData?.content?.length) {
      quotaCreated(quotaData)
    }
    if (visible === 2) {
      // 编辑. 初始化传进来的数据
      const temp = cloneDeep(indentData)
      if (temp.due_date) {
        temp.due_date = dayjs(temp.due_date * 1000).format('YYYY-MM-DD')
      } else {
        temp.due_date = ''
      }
      quoteList.value = cloneDeep(temp.lists || [])

      if (Array.isArray(temp.picture) && temp.picture.length) {
        nextTick(() => {
          imageList.value = temp.picture.map((img: string) => {
            return {
              url: $mediaRegExp.test(img)
                ? img
                : import.meta.env.VITE_APP_OSS_PREFIX + img,
            }
          })
        })
      }

      temp.entity_id = temp.id

      delete temp.id
      delete temp.admin_id
      delete temp.checked
      delete temp.create_time
      delete temp.creator
      delete temp.default_quote
      delete temp.list // quoteList
      delete temp.update_time
      // delete temp.status

      form.value = Object.assign({}, cloneDeep(formDemo), temp)
    }
  },
)

const $emit = defineEmits(['update:visible', 'create'])

const prefix = ref('order.indent.')
const prefix_edit = ref('order.indent_edit.')
const show = ref(false)
const skuSelectVisible = ref(false)
const form = ref({} as any)
const formDemo = {
  custom_name: '',
  custom_id: '', // 联动custom_name
  deal_name: '',
  deal_id: '', // 永远是空
  product_sku: '',
  item_id: '', // 看旧代码是和 product_sku 有联动, 应该是商品的id
  product_name: '',
  require_material: '',
  require_material_other: '',
  product_category: '',
  product_category_other: '',
  print_method: '',
  print_method_other: '',
  require_print: '',
  require_amount: '',
  due_date: '',
  ref_size_length: '',
  ref_size_width: '',
  ref_size_height: '',
  ref_url: '',
  other_note: '',
  picture: '',
}
const imageList = ref([])

const checkMaterial = (rule: any, value: any, cb: any) => {
  if (value === '') {
    return cb(new Error($t('text_please_select')))
  } else if (value === '其它') {
    if (
      !(
        form.value.require_material_other &&
        form.value.require_material_other.length
      )
    ) {
      return cb(new Error('选择其它时, 需填写具体内容!'))
    }
  }
  cb()
}
const checkCategory = (rule: any, value: any, cb: any) => {
  if (value === '') {
    return cb(new Error($t('text_please_select')))
  } else if (value === '其它') {
    if (
      !(
        form.value.product_category_other &&
        form.value.product_category_other.length
      )
    ) {
      return cb(new Error('选择其它时, 需填写具体内容!'))
    }
  }
  cb()
}
const checkPrint = (rule: any, value: any, cb: any) => {
  if (value === '') {
    return cb(new Error($t('text_please_select')))
  } else if (value === '其它') {
    if (
      !(form.value.print_method_other && form.value.print_method_other.length)
    ) {
      return cb(new Error('选择其它时, 需填写具体内容!'))
    }
  }
  cb()
}
const rules = {
  custom_name: [
    {
      required: true,
      message: $t('text_please_input'),
      trigger: 'change',
    },
  ],
  custom_id: [
    {
      required: true,
      message: $t('text_please_input'),
      trigger: 'change',
    },
  ],
  product_name: [
    {
      required: true,
      message: '请通过sku表单项选择一个商品',
      trigger: 'change',
    },
  ],
  require_material: [
    { required: true, validator: checkMaterial, trigger: 'change' },
  ],
  product_category: [
    { required: true, validator: checkCategory, trigger: 'change' },
  ],
  print_method: [{ required: true, validator: checkPrint, trigger: 'change' }],
  require_amount: [
    {
      required: true,
      message: $t('text_please_select'),
      trigger: 'change',
    },
  ],
}
// 客户下拉框候选列表
const customList = ref([] as any[])
const loading = ref(false)
const quoteList = ref([])

const selectSku = (data: any) => {
  form.value.product_name = data.product_name || ''
  form.value.product_sku = data.product_sku || ''
  form.value.item_id = data.id || ''
}
const customChange = (value: any) => {
  const temp = customList.value.filter((i: any) => i.name === value)
  // id为空且custom_name有值是新增
  form.value.custom_id = temp.length ? temp[0].id : ''
}
// 成功创建了报价, 把数据展示到界面
const quotaCreated = (data: any) => {
  if (Array.isArray(data.content)) {
    quoteList.value = quoteList.value.concat(data.content)
  }
}

const resetData = () => {
  form.value = cloneDeep(formDemo)
  imageList.value = []
  customList.value = []
  quoteList.value = []
}

const close = (done = {} as any) => {
  $emit('update:visible', 0)
  if (typeof done === 'function') done()
}

const infoVisible = ref(0)
const addInfo = () => {
  infoVisible.value = 1
}

const $mediaRegExp = inject('mediaRegExp') as RegExp
const indentForm = ref<FormInstance>()
const checkForm = (
  formEl: FormInstance | undefined,
  closeAfterCreate = true,
) => {
  if (!formEl) return
  formEl.validate((valid: boolean) => {
    if (valid) {
      form.value.picture = imageList.value
        .map((i: any) => {
          return i.url.replace($mediaRegExp, '/')
        })
        .join(',')

      // this$set(
      //   this.form,
      //   `quotes`,
      //   quoteList.value.map((d: any) => d.entity_id || d.id),
      // )
      form.value.quotes = quoteList.value.map((d: any) => d.entity_id || d.id)
      createIndent(form.value)
        .then((response: any) => {
          // console.log(response, 'create indent')
          if (response.code === 1) {
            ElNotification({
              title: '创建成功',
              message: '正在刷新数据',
              duration: 3000,
            })

            // notify parent-component to refresh list data
            $emit('create')
            resetData()
            if (closeAfterCreate) {
              close()
            } else {
              formEl.clearValidate()
            }
          }
        })
        .catch(() => {
          ElNotification({
            duration: 3000,
            title: '创建出错',
            message:
              '请稍后再试. 或者按F12打开控制台, 把错误信息复制出来找管理员排查.',
          })
        })
    }
  })
}
const getCustomListFun = (keyword: string) => {
  let keywords = keyword.trim()
  if (!keywords.length) return
  loading.value = true
  customList.value = []
  getCustomList({ keywords })
    .then((response: any) => {
      const defaultCreateOption = {
        name: keywords,
        id: '',
      }
      if (Array.isArray(response.result)) {
        const tempStr = keywords.replace(/\S_-/g, '').toLowerCase()
        const tempList = response.result.map((i: any) =>
          i.name.replace(/\S_-/g, '').toLowerCase(),
        )
        let result = []
        if (response.result.length) {
          if (tempList.includes(tempStr)) {
            result = response.result
          } else {
            // 结果里面没找到输入的搜索字符串, 就把它加入到结果里面当成‘新增的’
            result = [cloneDeep(defaultCreateOption)].concat(response.result)
          }
        } else if (keywords.length) {
          result = [cloneDeep(defaultCreateOption)]
        }
        customList.value = result
      }
    })
    .finally(() => {
      loading.value = false
    })
}
getCustomListFun('')
</script>
<style lang="scss">
.component-edit-indent {
  .custom-edit-indent-dialog {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100vh;
    .el-dialog__body {
      max-height: 87vh;
      overflow-y: scroll;
      overflow-x: auto;
      padding-top: 8px;
    }
  }
}
</style>
<style lang="scss" scoped>
.edit-indent-form {
  .el-form-item {
    width: 49%;
  }
}
.fake-sku-input {
  height: 30px;
  cursor: pointer;
}
</style>