更新案例pdf的预览问题

src/api/user-use-config.js

@@ -9,7 +9,7 @@ export function createUserUseConfig(data) {
 }
 
 // 添加用户使用配置
-export function UserUseConfig(id, params = {}) {
+export function userUseConfig(id, params = {}) {
   var headers = {
     'Content-Type': 'application/json'
   }

src/pages/v2/characteristics/index.vue

@@ -33,9 +33,7 @@
           stripe
           size="mini"
           style="width: 100%">
-          <el-table-column fixed prop="id" label="ID" width="150px">
-          </el-table-column>
-            <el-table-column width="150px" label="案例名称">
+          <el-table-column fixed width="150px" label="案例名称">
             <template slot-scope="scope">
               <span>{{ scope.row.case.name }}</span>
             </template>

src/pages/v2/reachschemes/index.vue

@@ -4,7 +4,7 @@
       <el-card class="box-card">
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-                    <el-breadcrumb-item>特征管理</el-breadcrumb-item>
+          <el-breadcrumb-item>触达管理</el-breadcrumb-item>
         </el-breadcrumb>
       </el-card>
     </div>
@@ -33,9 +33,7 @@
           stripe
           size="mini"
           style="width: 100%">
-                    <el-table-column fixed prop="id" label="ID" width="80px">
-                    </el-table-column>
-                    <el-table-column label="案例名称">
+          <el-table-column fixed label="案例名称">
             <template slot-scope="scope">
               <span>{{ scope.row.case.name }}</span>
             </template>

src/pages/v2/useruseconfigs/index.vue

@@ -4,7 +4,7 @@
       <el-card class="box-card">
         <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-                    <el-breadcrumb-item>特征管理</el-breadcrumb-item>
+          <el-breadcrumb-item>用户使用配置管理</el-breadcrumb-item>
         </el-breadcrumb>
       </el-card>
     </div>
@@ -33,13 +33,40 @@
           stripe
           size="mini"
           style="width: 100%">
-                    <el-table-column fixed prop="id" label="ID" width="150px">
-                    </el-table-column>
-                    <el-table-column fixed width="150px" label="案例名称">
+          <el-table-column fixed label="案例名称">
             <template slot-scope="scope">
               <span>{{ scope.row.case.name }}</span>
             </template>
           </el-table-column>
+          <el-table-column label="配置项">
+            <template slot-scope="scope">
+              <el-popover
+                placement="right"
+                width="500"
+                trigger="click">
+                <div style="padding: 14px;" v-for="(option, optionIndex) in scope.row.options" :key="'option-' + optionIndex">
+                  <el-card>
+                    <div>
+                      <span>{{ option }}</span>
+                    </div>
+                  </el-card>
+                </div>
+                <el-button slot="reference" size="mini">查看择算分规则</el-button>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间">
+            <template slot-scope="scope">
+              <i class="el-icon-time"></i>
+              <span style="margin-left: 10px">{{ scope.row.created_at }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="更新时间">
+            <template slot-scope="scope">
+              <i class="el-icon-time"></i>
+              <span style="margin-left: 10px">{{ scope.row.updated_at }}</span>
+            </template>
+          </el-table-column>
           <el-table-column fixed="right" label="操作">
             <template slot-scope="scope">
               <el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
@@ -63,11 +90,69 @@
         </div>
         </el-card>
     </div>
+    <div>
+      <el-drawer
+        title="创建用户使用配置"
+        :visible.sync="drawer"
+        direction="rtl"
+        :append-to-body="true"
+        :withHeader="true"
+        :before-close="handleClose"
+        ref="drawer"
+        size="50%">
+        <div class="demo-drawer__content">
+          <el-form :model="addForm" size="mini">
+            <el-form-item label="案例" :label-width="formLabelWidth">
+              <el-select
+                v-model.number="addForm.case2_id"
+                filterable
+                remote
+                reserve-keyword
+                placeholder="请输入案例名称"
+                :remote-method="remoteMethod"
+                :loading="caseLoading">
+                <el-option
+                  v-for="casesItem in cases"
+                  :key="casesItem.value"
+                  :label="casesItem.name"
+                  :value="casesItem.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-divider content-position="left">配置</el-divider>
+            </el-form-item>
+            <div v-for="(addOption, addOptionIndex) in addForm.options" :key="'addOption-' + addOptionIndex" style="margin-top: 2%">
+              <i style="margin-left: 15%" class="el-icon-circle-plus-outline" @click="addOptions(addOptionIndex)">添加</i>
+              <i class="el-icon-remove-outline" @click="removeOptions(addOptionIndex)">删除</i>
+              <el-card class="box-card" style="margin-left: 10%; margin-top: 2%">
+                <div style="margin-top: 2%">
+                  <span style="margin-left: 2%">
+                    <span>配置项：</span>
+                    <el-input size="mini" v-model="addForm.options[addOptionIndex]" placeholder="配置项" style="width: 50%"></el-input>
+                  </span>
+                </div>
+              </el-card>
+            </div>
+            <el-form-item>
+              <el-divider content-position="left"></el-divider>
+            </el-form-item>
+            <el-form-item>
+              <div class="demo-drawer__footer" style="margin-left: 60%">
+                <el-button @click="cancelForm">取 消</el-button>
+                <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-drawer>
+    </div>
   </div>
 </template>
 
 <script>
 import * as userUseConfigApi from '@/api/user-use-config'
+import * as casesApi from '@/api/cases2'
 export default {
   name: 'index',
   data() {
@@ -78,11 +163,22 @@ export default {
       limit: 10,
       tableData: [],
       drawer: false,
-      opera: ''
+      opera: '',
+      addForm: {
+        case2_id: '',
+        options: [
+          'APP弹窗'
+        ]
+      },
+      loading: false,
+      caseLoading: false,
+      cases: [],
+      formLabelWidth: '100px'
     }
   },
   mounted() {
     this.list({ page: this.currentPage, limit: this.limit })
+    this.caseList({ page: 1, limit: 10 })
   },
   methods: {
     handleSizeChange(val) {
@@ -117,6 +213,65 @@ export default {
     refresh() {
       this.searchCaseName = ''
       this.list({ page: 1, limit: this.limit })
+    },
+    caseList(params = {}) {
+      this.caseLoading = true
+      casesApi.case2s(params).then(res => {
+        if (res.code === 0) {
+          this.cases = res.data.data
+          this.caseLoading = false
+          return true
+        } else {
+          this.$message.error(res.message)
+          return false
+        }
+      })
+    },
+    remoteMethod(query) {
+      this.caseList({ name: query, page: 1, limit: 10 })
+    },
+    cancelForm() {
+      this.loading = false
+      this.drawer = false
+      clearTimeout(this.timer)
+    },
+    addOptions(addOptionIndex) {
+      this.addForm.options.push('')
+    },
+    removeOptions(addOptionIndex) {
+      if (this.addForm.options.length > 1) {
+        this.addForm.options.splice(addOptionIndex, 1)
+      }
+    },
+    handleClose(done) {
+      if (this.loading) {
+        return
+      }
+      this.$confirm('确定要提交表单吗？')
+        .then(_ => {
+          this.loading = true
+          // 提交表单
+          console.log(this.addForm)
+          userUseConfigApi.createUserUseConfig(this.addForm).then(res => {
+            if (res.code === 0) {
+              this.list({ page: 1, limit: this.limit })
+              this.caseList({ page: 1, limit: 10 })
+              this.$message.success(res.message)
+              return true
+            } else {
+              this.$message.error(res.message)
+              return false
+            }
+          })
+          this.timer = setTimeout(() => {
+            done()
+            // 动画关闭需要一定的时间
+            setTimeout(() => {
+              this.loading = false
+            }, 400)
+          }, 2000)
+        })
+        .catch(_ => {})
     }
   }
 }