主题库完善

src/views/ThemeGallery/index.vue

@@ -2,9 +2,9 @@
   <div class="app-container theme_main">
     <!-- 右上角btn -->
     <div class="home_publish_btn">
-      <el-button round class="el_button_green">新增</el-button>
-      <el-button round type="primary">编辑</el-button>
-      <el-button round class="el_button_red">上传</el-button>
+      <el-button round class="el_button_green" @click="addEdit(0)">新增</el-button>
+      <el-button round type="primary" @click="addEdit(1)">编辑</el-button>
+      <el-button round class="el_button_red" @click="uploadEdit">上传</el-button>
     </div>
     <div style="position:relative">
       <!-- 主题库list -->
@@ -15,10 +15,146 @@
         :show-item-info="showItemInfo"
       />
       <div class="material_btn">
-        <el-button round type="primary">上传历史</el-button>
+        <el-button round type="primary" @click="uploadListVisible=true">上传历史</el-button>
         <el-button round @click="multiSelectBtn">{{ mulitText }}</el-button>
       </div>
+    </div>
+
+    <!-- 平台技术人员-新增/编辑分类 -->
+    <div class="upload_layer">
+      <el-dialog
+        append-to-body
+        :show-close="false"
+        :visible.sync="addDialogVisible"
+        :title="layerTitle"
+        width="620px"
+      >
+        <el-form ref="classifyForm" inline :model="classifyForm" :rules="rules" size="small" label-width="80px">
+          <el-form-item v-if="isAddEdit==0" label="类别名称" prop="name">
+            <el-input v-model="classifyForm.name" style="width: 360px;" />
+          </el-form-item>
+          <el-form-item v-else label="类别名称" prop="selectName">
+            <el-select v-model="classifyForm.selectName" placeholder="请选择" style="width: 360px;" @change="selectName">
+              <el-option
+                v-for="item in nameOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="所属机构" prop="agency">
+            <el-select v-model="classifyForm.agency" multiple placeholder="请选择" style="width: 360px;">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" round @click="submitForm('classifyForm')">新增</el-button>
+          <el-button round @click="resetForm('classifyForm')">关闭</el-button>
+        </div>
+      </el-dialog>
+    </div>
 
+    <!-- 平台技术人员-上传 -->
+    <el-dialog
+      append-to-body
+      :show-close="false"
+      :visible.sync="uploadDialogVisible"
+      :title="uploadTitle"
+      class="upload_layer"
+    >
+      <el-form ref="classifyForm" :model="classifyForm" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="类别名称" prop="selectNameList">
+          <el-checkbox-group v-model="classifyForm.selectNameList">
+            <el-checkbox v-for="item in nameOptions" :key="item.value" :label="item.label">{{ item.label }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item label="设备方向" prop="direction">
+          <el-radio-group v-model="classifyForm.direction">
+            <el-radio :label="0">横屏</el-radio>
+            <el-radio :label="1">竖屏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="文件名称">
+          <el-input v-model="classifyForm.name" style="width:336px" />
+        </el-form-item>
+        <el-form-item label="上传内容" prop="file">
+          <el-upload action="#" list-type="picture-card" :auto-upload="false">
+            <img src="@/assets/images/t-sc.png" alt />
+            <div slot="file" slot-scope="{file}">
+              <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" round @click="submitForm('classifyForm')">新增</el-button>
+        <el-button round @click="resetForm('classifyForm')">关闭</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 上传历史layer -->
+    <div class="upload_layer">
+      <el-dialog
+        title="上传历史"
+        :close-on-click-modal="false"
+        :visible.sync="uploadListVisible"
+        height="384px"
+      >
+        <el-form ref="form" :model="form" label-width="80px" class="query_history">
+          <el-form-item label="文件名称">
+            <el-input v-model="form.name" style="width:200px" />
+          </el-form-item>
+          <el-form-item label="时间">
+            <el-date-picker
+              v-model="form.date"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+          </el-form-item>
+        </el-form>
+        <el-table :data="uploadData" :header-cell-style="{ color: '#333' }">
+          <el-table-column align="center" prop="name" label="文件名称" />
+          <el-table-column align="center" prop="cover" label="发布内容">
+            <template slot-scope="scope">
+              <div>
+                <img width="48px" height="64px" size="medium" :src="scope.row.cover" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="type" label="类别名称" />
+          <el-table-column align="center" prop="direction" label="设备方向">
+            <template slot-scope="scope">
+              {{ scope.row.direction ? "竖屏" : "横屏" }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="agency" label="所属机构" />
+          <el-table-column align="center" prop="date" label="上传时间" width="150" />
+          <el-table-column align="center" prop="publisher" label="发布人" />
+          <el-table-column align="center" prop="handle" label="操作">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                class="edit_btn"
+                @click="uploadEdit(scope.$index, scope.row)"
+              >编辑</el-button>
+              <el-button
+                type="primary"
+                :class="['start_btn', { stop_btn: scope.row.enabled }]"
+                @click="isStopHandle(scope.$index, scope.row)"
+              >{{ scope.row.enabled ? "停止" : "恢复" }}</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-dialog>
     </div>
   </div>
 </template>
@@ -32,7 +168,73 @@ export default {
     return {
       mulitText: '多选',
       isMultiSelected: false,
-      showItemInfo: true
+      showItemInfo: true,
+      uploadListVisible: false,
+      addDialogVisible: false,
+      layerTitle: '新增',
+      uploadDialogVisible: false,
+      uploadTitle: '上传',
+      isAddEdit: 0,
+      form: {
+        name: null,
+        date: null
+      },
+      classifyForm: {
+        name: null,
+        agency: null,
+        selectName: null,
+        direction: null,
+        selectNameList: []
+      },
+      options: [
+        {
+          value: '选项1',
+          label: '全部'
+        },
+        {
+          value: '选项2',
+          label: '武汉图书馆'
+        }
+      ],
+      nameOptions: [
+        {
+          value: '选项1',
+          label: '为你推荐',
+          checked: false
+        },
+        {
+          value: '选项2',
+          label: '人工智能',
+          checked: true
+        }
+      ],
+      rules: {
+        name: [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
+        selectName: [
+          { required: true, message: '请选择类别名称', trigger: 'change' }
+        ],
+        selectNameList: [
+          { required: true, message: '请选择类别名称', trigger: 'change' }
+        ],
+        agency: [
+          { required: true, message: '请选择所属机构', trigger: 'change' }
+        ],
+        direction: [
+          { required: true, message: '请选择设备方向', trigger: 'change' }
+        ]
+      },
+      uploadData: [
+        {
+          name: '图片1',
+          cover: require('@/assets/images/background.jpg'),
+          type: '为你推荐',
+          direction: 0,
+          agency: '全部',
+          date: '2022-1-1 15：00',
+          publisher: '张三',
+          enabled: false
+        }
+      ]
     }
   },
   mounted() {
@@ -46,7 +248,60 @@ export default {
       } else {
         this.mulitText = '多选'
       }
+    },
+    // 上传历史-停用/恢复
+    isStopHandle(index, row) {
+      row.enabled = !row.enabled
+    },
+    addEdit(index) {
+      this.addDialogVisible = true
+      index ? this.layerTitle = '编辑' : this.layerTitle = '新增'
+      index ? this.isAddEdit = 1 : this.isAddEdit = 0
+      // if (index) {
+      //   this.layerTitle = '编辑'
+      //   this.isAddEdit = 1
+      //   // this.classifyForm.selectName = 0
+      // } else {
+      //   this.layerTitle = '新增'
+      //   this.isAddEdit = 0
+      // }
+    },
+    uploadEdit(index, row) {
+      this.uploadDialogVisible = true
+      if (row) {
+        console.log(row.type)
+        this.uploadTitle = '编辑'
+        this.classifyForm.name = row.name
+        this.classifyForm.direction = row.direction
+        this.classifyForm.selectNameList.push(row.type)
+      } else {
+        this.uploadTitle = '上传'
+      }
+    },
+    selectName(vId) {
+      let obj = {}
+      obj = this.nameOptions.find((item) => {
+        return item.value === vId
+      })
+      this.classifyForm.selectName = obj.value
+    },
+    // 新增编辑
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.addDialogVisible = false
+      this.uploadDialogVisible = false
+      this.$refs[formName].resetFields()
     }
+
   }
 }
 </script>
@@ -86,4 +341,25 @@ export default {
     top: 93px;
   }
 }
+.upload_layer{
+  .query_history{
+    display: flex;
+  }
+  ::v-deep .el-dialog__body {
+    .el-form-item__label{
+      height: 30px;
+      line-height: 30px;
+    }
+    .el-input__inner{
+      height: 30px;
+      line-height: 30px;
+    }
+    .el-range-separator{
+      line-height: 26px;
+    }
+    .el-checkbox__label{
+      line-height: 30px;
+    }
+  }
+}
 </style>

src/views/immediateRelease/index.vue

@@ -284,6 +284,7 @@
               <div class="set_time set_audio">
                 <span>音频：</span>
                 <p class="audio_name">audio.mp3</p>
+                <!-- 主题库音频文件不可选择 -->
                 <el-button type="primary" round @click="selectAudioCont">选择文件</el-button>
               </div>
             </div>

src/views/materialContent/materialList/index.vue

@@ -418,6 +418,11 @@ export default {
     }
   }
 }
+.upload_layer{
+  ::v-deep .el-dialog__body{
+    padding: 0 20px 30px 20px;
+  }
+}
 ::v-deep .el-table {
   .el-button {
     padding: 0 10px;