Merge branch 'master' of github.com:szuprefix/vue-django

szuprefix · Dec 8, 2020 · 5195b26 · 5195b26
2 parents 048f469 + fe9cd4a
commit 5195b26
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/src/components/model/Search.vue b/src/components/model/Search.vue
@@ -22,7 +22,7 @@
                 <el-option :label="getBoolFieldFalseLabel(f.label)" :value="false"></el-option>
             </el-select>
             <model-select :field="f" v-model="form[f.name]" @input="onSearch"
-                          :showCreate="false" :appModel="f.model"
+                          :showCreate="false" :appModel="f.relateModel || f.model" :showLink="false"
                           :title="f.label" :style="`width:${f.label.length+5}rem;min-width:8rem;`"
                           v-else-if="f.widget === 'modelselect'" :pageSize="100"></model-select>
             <el-select v-model="form[f.name]" clearable :placeholder="`请选择${f.label}`"

diff --git a/src/components/model/Select.vue b/src/components/model/Select.vue
@@ -1,24 +1,26 @@
 <template>
-    <el-select v-model="selectedValue" :disabled="field.disabled" ref="select" class="model-select"
+    <el-select v-model="selectedValue" :disabled="field.disabled" ref="select" :class="`related-select ${field.name}`"
                :multiple="field.multiple" filterable @change="changed" remote clearable reserve-keyword
-               :remote-method="onFilter" :class="`related-select ${field.name}`" default-first-option
+               :remote-method="onFilter" default-first-option
                :loading="loading" :loading-text="`${loading}`"
                :placeholder="field.placeholder || `请选择${field.label}`">
-        <el-option :label="c.__str__ || c.name || c.title" :value="c.id || c.pk || c.url || c.name"
-                   v-for="c in optionList" :key="c.id || c.pk || c.url || c.name">
+        <el-option :label="c.__str__ || c.name || c.title" :value="c[idField] || c.pk || c.url || c.name"
+                   v-for="c in optionList" :key="c[idField] || c.pk || c.url || c.name">
             <span>{{c[selectOptionsFields[0]]}}</span>
+            <i v-if="showLink" class="fa fa-link" title="跳转到详情页" @click="$router.push(modelDetailPath)"></i>
             <span class="label-right" v-if="selectOptionsFields[1]">{{c[selectOptionsFields[1]]}}</span>
         </el-option>
         <el-alert type="info" v-if="moreThanOnePage" show-icon title="记录太多未展示完全,请输入关键字进行搜索" :closable="false">
         </el-alert>
 
-        <el-alert v-if="showCreate && canAdd" @click.native="toCreateModel" type="warning" center style="cursor: pointer"
+        <el-alert v-if="showCreate && canAdd" @click.native="toCreateModel" type="warning" center
+                  style="cursor: pointer"
                   :closable="false">
             <i class="fa fa-plus" style="margin-right: 1rem"></i>新增{{field.label}}
         </el-alert>
         <template #empty>
-            <el-alert v-if="showCreate && canAdd" @click.native="toCreateModel" type="warning" center style="cursor: pointer"
-                      :closable="false">
+            <el-alert v-if="showCreate && canAdd" @click.native="toCreateModel" type="warning" center
+                      style="cursor: pointer" :closable="false">
                 <i class="fa fa-plus" style="margin-right: 1rem"></i>新增{{field.label}}
             </el-alert>
         </template>
@@ -37,7 +39,8 @@
             placeholder: String,
             field: Object,
             showCreate: {type: Boolean, default: true},
-            value: [String, Number, Array]
+            value: [String, Number, Array],
+            showLink: {type: Boolean, default: true}
         },
         data() {
             return {
@@ -51,6 +54,7 @@
             }
         },
         created(){
+//            console.log(this.field)
             this.model.init()
             this.selectOptionsFields = this.model.config.selectOptionsFields || ['__str__']
 //            Object.assign(this.tableQueries, this.field.baseQueries, this.baseQueries)
@@ -83,7 +87,7 @@
                     return Promise.resolve()
                 }
                 let qs = Object.assign({}, this.field.baseQueries)
-                qs['id__in'] = v.join(',')
+                qs[`${this.idField}__in`] = v.join(',')
                 qs['page_size'] = v.length
                 return this.loadData(qs).then(({data}) => {
                     this.selectedObjects = data.results
@@ -97,7 +101,7 @@
                 return this.loadData(Object.assign({page_size: DEFAULT_PAGE_SIZE}, this.field.baseQueries, qs)).then(({data}) => {
                     this.data = data.results
                     if(data.count === 1 && !this.selectedValue) {
-                        this.$emit('input', this.data[0].id)
+                        this.$emit('input', this.data[0][this.id_field])
                     }
                     this.moreThanOnePage = data.next
                 })
@@ -137,8 +141,13 @@
             },
             canAdd () {
                 return this.checkPermission('create')
+            },
+            idField() {
+                return this.field.idField || 'id'
+            },
+            modelDetailPath () {
+                return this.model.getDetailUrl(this.selectedValue)
             }
-
         },
         watch: {
             selectedValue(v){
@@ -156,4 +165,17 @@
         color: #8492a6;
         font-size: 0.8rem;
     }
+
+    .el-select-dropdown__item .fa-link {
+        display: none;
+    }
+
+    .el-select-dropdown__item.selected .fa-link {
+        display: inline-block;
+        margin-top: 0.5rem;
+        margin-left: 0.5rem;
+        cursor: pointer;
+        color: gray;
+        float: right;
+    }
 </style>