目录代码整合

packages/device/AppMediaManage/components/Add.vue

@@ -0,0 +1,189 @@
+<template>
+  <section style="height: 100%">
+    <ai-detail class="Add">
+      <!-- 返回按钮 -->
+      <template #title>
+        <ai-title title="添加媒资信息" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
+      </template>
+      <template #content>
+        <el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
+          <ai-bar title="基础信息"></ai-bar>
+          <div class="flex">
+            <el-form-item label="媒资类型" prop="type" class="buildingTypes">
+              <el-radio-group v-model="formData.type">
+                <el-radio label='1'>音频广播</el-radio>
+                <el-radio label='3'>文本广播</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="媒资名称" prop="name" class="buildingTypes">
+              <el-input size="small" v-model="formData.name" placeholder="请输入" maxlength="30" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item label="文本内容" prop="content" class="buildingTypes" v-if="formData.type == 3">
+              <el-input size="small"  type="textarea" :rows="2" v-model="formData.content" placeholder="请输入" maxlength="12000" show-word-limit></el-input>
+            </el-form-item>
+            <el-form-item label="上传音频" prop="file" class="buildingTypes" v-if="formData.type == 1">
+              <ai-uploader
+                  :isShowTip="true"
+                  :instance="instance"
+                  v-model="formData.file"
+                  fileType="file"
+                  acceptType=".mp3"
+                  :limit="1">
+                <template slot="tips">最多上传1个附件,单个文件最大10MB<br/>支持.mp3格式
+                </template>
+              </ai-uploader>
+              <ai-audio :src="formData.file[0].url" style="width: 40px;height: 40px;margin-top:20px;" v-if="formData.file.length"></ai-audio>
+            </el-form-item>
+          </div>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="confirm()">提交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Add',
+  components: {},
+  props: {
+    dict: Object,
+    params: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      formData: {
+        type: '1',
+        name: '',
+        content: '',
+        file: [],
+        url: ''
+      },
+      formRules: {
+        name: [
+          { required: true, message: '请输入媒资名称', trigger: 'change' }
+        ],
+        content: [
+          { required: true, message: '请输入文本内容', trigger: 'change' }
+        ],
+        file: [
+          { required: true, message: '请上传音频', trigger: 'change' }
+        ],
+      },
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  created() {
+    this.instance.defaults.timeout = 6000000
+  },
+  methods: {
+    confirm() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          if(this.formData.file.length) {
+            this.formData.url = this.formData.file[0].url
+          }
+          this.instance.post(`/app/appdlbresource/addResource`,  {...this.formData}).then((res) => {
+            if (res.code == 0) {
+              this.$message.success('提交成功')
+              setTimeout(() => {
+                this.cancel(true)
+              }, 1000)
+            }
+          })
+        }
+      })
+    },
+
+    // 返回按钮
+    cancel(isRefresh) {
+      this.$emit('change', {
+        type: 'list',
+        isRefresh: !!isRefresh,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.Add {
+  height: 100%;
+  .ai-detail__title {
+    background-color: #fff;
+  }
+  .ai-detail__content {
+    .ai-detail__content--wrapper {
+      .el-form {
+        background-color: #fff;
+        padding: 0 60px;
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .el-form-item {
+            width: 48%;
+          }
+          .buildingTypes {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+::v-deep .mapDialog {
+  .el-dialog__body {
+    padding: 0;
+
+    .ai-dialog__content {
+      padding: 0;
+    }
+
+    .ai-dialog__content--wrapper {
+      padding: 0 !important;
+      position: relative;
+    }
+
+    #map {
+      width: 100%;
+      height: 420px;
+    }
+
+    .searchPlaceInput {
+      position: absolute;
+      width: 250px;
+      top: 30px;
+      left: 25px;
+    }
+
+    #searchPlaceOutput {
+      position: absolute;
+      width: 250px;
+      left: 25px;
+      height: initial;
+      top: 80px;
+      background: white;
+      z-index: 250;
+      max-height: 300px;
+      overflow-y: auto;
+
+      .auto-item {
+        text-align: left;
+        font-size: 14px;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+</style>