guoshilong
2023-11-13 54849757852f6ab40eb17afbd03d1d839b60a38d
src/pages/page-web/projects/Firmwares.vue
@@ -17,14 +17,16 @@
          </a-form-item>
          <a-form-item name="device_name" label="Device Name" required>
            <a-select
              style="width: 150px"
              style="width: 220px"
              mode="multiple"
              placeholder="can choose multiple"
              v-model:value="uploadParam.device_name">
              <a-select-option
                v-for="item in deviceNameList"
                :key="item.label"
                :value="item.value"
                v-for="k in DeviceNameEnum"
                :key="k"
                :value="k"
              >
                {{ item.label }}
                {{ k }}
              </a-select-option>
            </a-select>
          </a-form-item>
@@ -90,16 +92,9 @@
  <div class="table flex-display flex-column">
    <a-table :columns="columns" :data-source="data.firmware" :pagination="paginationProp" @change="refreshData" row-key="firmware_id"
     :rowClassName="(record, index) => ((index % 2) === 0 ? 'table-striped' : null)" :scroll="{ x: '100%', y: 600 }">
      <template v-for="col in ['mqtt_username', 'mqtt_password']" #[col]="{ text, record }" :key="col">
        <div>
          <a-input
            v-if="editableData[record.user_id]"
            v-model:value="editableData[record.user_id][col]"
            style="margin: -5px 0"
          />
          <template v-else>
            {{ text }}
          </template>
      <template #device_name="{ record }">
        <div v-for="text in record.device_name" :key="text">
          {{ text }}
        </div>
      </template>
      <template #file_size="{ record }">
@@ -135,7 +130,7 @@
  firmware: Firmware[]
}
const columns = [
  { title: 'Model', dataIndex: 'device_name', width: 120, className: 'titleStyle' },
  { title: 'Model', dataIndex: 'device_name', width: 120, ellipsis: true, className: 'titleStyle', slots: { customRender: 'device_name' } },
  { title: 'File Name', dataIndex: 'file_name', width: 220, ellipsis: true, className: 'titleStyle', slots: { customRender: 'file_name' } },
  { title: 'Firmware Version', dataIndex: 'product_version', width: 180, className: 'titleStyle' },
  { title: 'File Size', dataIndex: 'file_size', width: 150, className: 'titleStyle', slots: { customRender: 'file_size' } },
@@ -200,15 +195,15 @@
const sVisible = ref(false)
const uploadParam = reactive<FirmwareUploadParam>({
  device_name: '',
  device_name: [],
  release_note: '',
  status: true
})
const rules = {
  status: [{ required: true }],
  release_note: [{ required: true, message: 'Please input release note.' }],
  device_name: [{ required: true, message: 'Please select which model this firmware belongs to. Can not be [All].' }]
  release_note: [{ required: true, message: '请输入发行说明' }],
  device_name: [{ required: true, message: '请选择该固件属于哪个型号' }]
}
interface FileItem {
  uid: string;
@@ -226,7 +221,7 @@
function beforeUpload (file: FileItem) {
  if (!file.name || !file.name?.endsWith('.zip')) {
    message.error('Format error. Please select zip file.')
    message.error('格式错误。请选择zip文件')
    return false
  }
  fileList.value = [file]
@@ -245,34 +240,43 @@
const uploadFile = async () => {
  if (fileList.value.length === 0) {
    message.error('Please select at least one file.')
    message.error('请选择至少一个文件')
  }
  const uploading: string = 'uploading'
  let uploading: string
  formRef.value.validate().then(async () => {
    const file: FileItem = fileList.value[0]
    const fileData = new FormData()
    fileData.append('file', file as any, file.name)
    Object.keys(uploadParam).forEach((key) => {
      fileData.append(key, uploadParam[key as keyof FirmwareUploadParam].toString())
      const val = uploadParam[key as keyof FirmwareUploadParam]
      if (val instanceof Array) {
        val.forEach((value) => {
          fileData.append(key, value)
        })
      } else {
        fileData.append(key, val.toString())
      }
    })
    const timestamp = new Date().getTime()
    uploading = (file.name ?? 'uploding') + timestamp
    notification.open({
      key: uploading,
      message: `Uploading  ${moment().format()}`,
      description: `[${file.name}] is uploading... `,
      message: `上传中  ${moment().format()}`,
      description: `[${file.name}] 正在上传... `,
      duration: null
    })
    importFirmareFile(workspaceId, fileData).then((res) => {
      if (res.code === 0) {
        notification.success({
          message: `Uploaded  ${moment().format()}`,
          description: `[${file.name}] file uploaded successfully.`,
          message: `上传完毕  ${moment().format()}`,
          description: `[${file.name}] 文件上传完毕. 用时: ${moment.duration(new Date().getTime() - timestamp).asSeconds()}`,
          duration: null
        })
        getAllFirmwares(pageParam)
      } else {
        notification.error({
          message: `Failed to upload [${file.name}]. Check and try again.`,
          description: `Error message: ${res.message} ${moment().format()}`,
          message: `上传失败 [${file.name}]. 检查并重新上传`,
          description: `错误信息: ${res.message} ${moment().format()}`,
          style: { color: commonColor.FAIL },
          duration: null,
        })