修改自定义查询组件中的微服务方法和前端样式

src/dashoo.cn/frontend_animal/src/components/samples/samplesourcesearchdialog.vue

@@ -33,202 +33,209 @@
         <!-- </el-row> -->
 
       </el-col>
-      <el-col :span="16">
-        <el-card>
-          <el-form inline
-                   label-width="120px">
-            <el-row>
-              <el-col>
-                <el-button size="mini"
-                           type="primary"
-                           style="margin-top:10px;"
-                           @click="resetcustomcondition()">新增方案</el-button>
-                <el-button size="mini"
-                           type="primary"
-                           style="margin-top:10px;"
-                           @click="saveSearchTemplate()">保存</el-button>
-                <el-form-item label="自定义搜索名称">
-                  <el-input v-model="currentSearchTemplateName"
-                            @change="customsearchnamechange()"
-                            size="mini"
-                            style="width:200px"
-                            placeholder="请输入自定义名称"></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
+      <el-col :span="18">
+        <el-row style="margin-bottom:20px">
+          <el-col :span="24">
+            <el-card>
+              <el-tag v-for="tag in searchTemplates"
+                      :id="tag.id"
+                      :key="tag.name"
+                      closable
+                      class="reporttag reportselect"
+                      @click="clickmodeltypetag(tag.name, tag.id)"
+                      @close="removeSearchTab(tag.id,tag.name)">
+                <i class="el-icon-caret-right"
+                   v-if="tag.name === currentSearchTemplateName"></i>
+                {{tag.name}}
+              </el-tag>
+            </el-card>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-card>
+              <el-form inline
+                       label-width="120px">
+                <el-row>
+                  <el-col>
+                    <el-button size="mini"
+                               type="primary"
+                               style="margin-top:10px;"
+                               @click="resetcustomcondition()">新增方案</el-button>
+                    <el-button size="mini"
+                               type="primary"
+                               style="margin-top:10px;"
+                               @click="saveSearchTemplate()">保存</el-button>
+                    <el-form-item label="自定义搜索名称">
+                      <el-input v-model="currentSearchTemplateName"
+                                @change="customsearchnamechange()"
+                                size="mini"
+                                style="width:200px"
+                                placeholder="请输入自定义名称"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
 
-          <el-table :data="searchTableData"
-                    size="mini"
-                    border
-                    style="width: 100%;margin-top:-60px"
-                    height="calc(100vh - 360px)">
-            <el-table-column prop="Name"
-                             label="字段"
-                             align="center"
-                             show-overflow-tooltip>
-            </el-table-column>
-            <el-table-column prop="Operate"
-                             label="表达式"
-                             align="center"
-                             width="200px"
-                             show-overflow-tooltip>
-              <template slot-scope="scope">
-                <el-select v-if="scope.row.TagIcon==='date'"
-                           v-model="scope.row.Operate">
-                  <el-option v-for="item in dateoptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
-                </el-select>
-                <!--1. 基础字段是str类型 或者 2.是扩展字段但是不是日期类型 , -->
-                <el-select v-if="acquritype(scope.row)=='str'||(scope.row.kuoz==='true'&&scope.row.FieldType!==4)"
-                           v-model="scope.row.Operate">
-                  <el-option v-for="item in stroptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
-                </el-select>
-                <!--如果基础字段是date类型，或者扩展字段并且是日期类型，那么就选用日期类型的表达式-->
-                <el-select v-else-if="acquritype(scope.row)=='str'||(scope.row.kuoz==='true'&&scope.row.FieldType===4)"
-                           v-model="scope.row.Operate">
-                  <el-option v-for="item in dateoptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
-                </el-select>
-                <!-- <el-select v-else-if="scope.row.TagIcon==='date'"
-                           v-model="scope.row.Operate">
-                  <el-option v-for="item in dateoptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
-                </el-select> -->
+              <el-table :data="searchTableData"
+                        size="mini"
+                        border
+                        style="width: 100%;margin-top:-60px"
+                        height="calc(100vh - 360px)">
+                <el-table-column prop="Name"
+                                 label="字段"
+                                 align="center"
+                                 show-overflow-tooltip>
+                </el-table-column>
+                <el-table-column prop="Operate"
+                                 label="表达式"
+                                 align="center"
+                                 width="200px"
+                                 show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <el-select v-if="scope.row.TagIcon==='date'"
+                               v-model="scope.row.Operate">
+                      <el-option v-for="item in dateoptions"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select>
+                    <!--1. 基础字段是str类型 或者 2.是扩展字段但是不是日期类型 , -->
+                    <el-select v-if="acquritype(scope.row)=='str'||(scope.row.kuoz==='true'&&scope.row.FieldType!==4)"
+                               v-model="scope.row.Operate">
+                      <el-option v-for="item in stroptions"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select>
+                    <!--如果基础字段是date类型，或者扩展字段并且是日期类型，那么就选用日期类型的表达式-->
+                    <el-select v-else-if="acquritype(scope.row)=='str'||(scope.row.kuoz==='true'&&scope.row.FieldType===4)"
+                               v-model="scope.row.Operate">
+                      <el-option v-for="item in dateoptions"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select>
+                    <!-- <el-select v-else-if="scope.row.TagIcon==='date'"
+                               v-model="scope.row.Operate">
+                      <el-option v-for="item in dateoptions"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select> -->
 
-                <!--如果基础字段是int类型，选用int表达式-->
-                <el-select v-else-if="acquritype(scope.row)=='int'"
-                           v-model="scope.row.Operate">
-                  <el-option v-for="item in intoptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
-                </el-select>
-                <!--如果基础字段是cascader类型-->
-                <el-select v-else-if="acquritype(scope.row)=='cascader'"
-                           v-model="scope.row.Operate">
-                  <el-option v-for="item in dateoptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
-                </el-select>
-                <!--如果基础字段是date类型，选用日期表达式-->
-                <el-select v-else-if="acquritype(scope.row)=='date'"
-                           v-model="scope.row.Operate">
-                  <el-option v-for="item in dateoptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column prop="Value"
-                             label="值"
-                             width="250"
-                             align="center"
-                             show-overflow-tooltip>
-              <template slot-scope="scope">
-                <!--这个v-if 程序中不会走进来，是日期类型between and 的条件，不要删除-->
-                <el-date-picker v-model="scope.row.Value"
-                                type="daterange"
-                                v-if="acquritype(scope.row)==='date'&&scope.row.Operate==='between'"
-                                range-separator="至"
-                                start-placeholder="开始日期"
-                                end-placeholder="结束日期"
-                                value-format="yyyy-MM-dd"
-                                style="width:100%"></el-date-picker>
-                <!--如果基础字段是date类型，或者扩展字段的字段类型是日期类型-->
-                <el-date-picker v-model="scope.row.Value"
-                                v-else-if="acquritype(scope.row)==='date'||scope.row.FieldType===4"
-                                type="date"
-                                value-format="yyyy-MM-dd"
-                                :clearable="true"></el-date-picker>
-                <!--如果基础字段是str类型，就正常展示input-->
-                <!-- <el-input v-model="scope.row.Value"
-                          placeholder="请输入内容"
-                          v-else-if="acquritype(scope.row)==='str'||acquritype(scope.row)==='int'"></el-input> -->
+                    <!--如果基础字段是int类型，选用int表达式-->
+                    <el-select v-else-if="acquritype(scope.row)=='int'"
+                               v-model="scope.row.Operate">
+                      <el-option v-for="item in intoptions"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select>
+                    <!--如果基础字段是cascader类型-->
+                    <el-select v-else-if="acquritype(scope.row)=='cascader'"
+                               v-model="scope.row.Operate">
+                      <el-option v-for="item in dateoptions"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select>
+                    <!--如果基础字段是date类型，选用日期表达式-->
+                    <el-select v-else-if="acquritype(scope.row)=='date'"
+                               v-model="scope.row.Operate">
+                      <el-option v-for="item in dateoptions"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="Value"
+                                 label="值"
+                                 width="250"
+                                 align="center"
+                                 show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <!--这个v-if 程序中不会走进来，是日期类型between and 的条件，不要删除-->
+                    <el-date-picker v-model="scope.row.Value"
+                                    type="daterange"
+                                    v-if="acquritype(scope.row)==='date'&&scope.row.Operate==='between'"
+                                    range-separator="至"
+                                    start-placeholder="开始日期"
+                                    end-placeholder="结束日期"
+                                    value-format="yyyy-MM-dd"
+                                    style="width:100%"></el-date-picker>
+                    <!--如果基础字段是date类型，或者扩展字段的字段类型是日期类型-->
+                    <el-date-picker v-model="scope.row.Value"
+                                    v-else-if="acquritype(scope.row)==='date'||scope.row.FieldType===4"
+                                    type="date"
+                                    value-format="yyyy-MM-dd"
+                                    :clearable="true"></el-date-picker>
+                    <!--如果基础字段是str类型，就正常展示input-->
+                    <!-- <el-input v-model="scope.row.Value"
+                              placeholder="请输入内容"
+                              v-else-if="acquritype(scope.row)==='str'||acquritype(scope.row)==='int'"></el-input> -->
 
-                <!--如果基础字段是cascader类型，就正常展示cascader-->
+                    <!--如果基础字段是cascader类型，就正常展示cascader-->
 
-                <el-cascader :options="orgtreelist"
-                             v-if="acquritypeN(scope.row)=='cascader'"
-                             :props="orgtreeprops"
-                             change-on-select
-                             v-model="scope.row.Value"
-                             placeholder="请选择"
-                             clearable
-                             @change="changecascader"></el-cascader>
-                <!-- <el-select v-if="acquritypeN(scope.row)=='select'"
-                           v-model="scope.row.Operate">
-                  <el-option v-for="item in intoptions"
-                             :key="item.value"
-                             :label="item.label"
-                             :value="item.value"></el-option>
-                </el-select> -->
-                <el-date-picker v-model="scope.row.Value"
-                                v-else-if="acquritypeN(scope.row)==='date'"
-                                type="date"
-                                value-format="yyyy-MM-dd"
-                                :clearable="true"></el-date-picker>
-                <el-input v-model="scope.row.Value"
-                          placeholder="请输入内容"
-                          v-else="acquritypeN(scope.row)=='input'"></el-input>
-              </template>
-            </el-table-column>
-            <el-table-column prop="Guanxi"
-                             label="逻辑关系"
-                             align="center"
-                             show-overflow-tooltip>
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.Guanxi"
-                           v-if="scope.$index + 1 != searchTableData.length">
-                  <el-option v-for="item in orAndData"
-                             :key="item.value"
-                             :label="item.name"
-                             :value="item.value"></el-option>
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作"
-                             align="center"
-                             show-overflow-tooltip>
-              <template slot-scope="scope">
-                <el-button @click="removeCustomCondition(scope.row)"
-                           title="移除"
-                           type="danger"
-                           icon="el-icon-close"
-                           class="dashoo_button_2"
-                           circle
-                           size="small"></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-      <el-col :span="4">
-        <el-card>
-          <el-tag v-for="tag in searchTemplates"
-                  :id="tag.Name"
-                  :key="tag.Name"
-                  closable
-                  class="reporttag reportselect"
-                  @click="clickmodeltypetag(tag.Name)"
-                  @close="removeSearchTab(tag.Id,tag.Name)">
-            <i class="el-icon-caret-right"
-               v-if="tag.Name === currentSearchTemplateName"></i>
-            {{tag.Name}}
-          </el-tag>
-        </el-card>
+                    <el-cascader :options="orgtreelist"
+                                 v-if="acquritypeN(scope.row)=='cascader'"
+                                 :props="orgtreeprops"
+                                 change-on-select
+                                 v-model="scope.row.Value"
+                                 placeholder="请选择"
+                                 clearable
+                                 @change="changecascader"></el-cascader>
+                    <!-- <el-select v-if="acquritypeN(scope.row)=='select'"
+                               v-model="scope.row.Operate">
+                      <el-option v-for="item in intoptions"
+                                 :key="item.value"
+                                 :label="item.label"
+                                 :value="item.value"></el-option>
+                    </el-select> -->
+                    <el-date-picker v-model="scope.row.Value"
+                                    v-else-if="acquritypeN(scope.row)==='date'"
+                                    type="date"
+                                    value-format="yyyy-MM-dd"
+                                    :clearable="true"></el-date-picker>
+                    <el-input v-model="scope.row.Value"
+                              placeholder="请输入内容"
+                              v-else="acquritypeN(scope.row)=='input'"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="Guanxi"
+                                 label="逻辑关系"
+                                 align="center"
+                                 show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <el-select v-model="scope.row.Guanxi"
+                               v-if="scope.$index + 1 != searchTableData.length">
+                      <el-option v-for="item in orAndData"
+                                 :key="item.value"
+                                 :label="item.name"
+                                 :value="item.value"></el-option>
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作"
+                                 align="center"
+                                 show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <el-button @click="removeCustomCondition(scope.row)"
+                               title="移除"
+                               type="danger"
+                               icon="el-icon-close"
+                               class="dashoo_button_2"
+                               circle
+                               size="small"></el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-card>
+          </el-col>
+        </el-row>
       </el-col>
+
     </el-row>
   </el-dialog>
 </template>
@@ -479,15 +486,13 @@ export default {
     resetForm () {
       // 自定义弹框数据
       this.currentSearchTemplateName = '',
-        this.currentSearchId = 0,
-        this.searchTableData = [],
-        this.searchTemplates = [],
-        this.searchTemplateName = ''
-      // console.log('rest')
+      this.currentSearchId = 0,
+      this.searchTableData = [],
+      this.searchTemplates = [],
+      this.searchTemplateName = ''
     },
     // 点击关闭时调用
     closePopup () {
-      // console.log('close')
       this.resetForm()
       // this.resetcustomcondition()
       this.samplesourcesearchdialogVisable = false
@@ -496,10 +501,7 @@ export default {
     creatpage () {
       // 黏膜搜索
       this.searchKuoZhanData()
-      // this.getSampleSourceTypeExpand()
       this.getAllSearchTab()
-      // this.resetForm()
-      // console.log("ddddd自定义搜索---currentSearchTemplateName", this.currentSearchTemplateName)
     },
     removeCustomCondition (row) {
       if (this.searchTableData !== undefined && this.searchTableData != null && this.searchTableData.length > 0) {
@@ -589,18 +591,21 @@ export default {
     },
     getAllSearchTab () {
       let _this = this
-      service.postRequest('dashoo.biobank.bee-0.1', 'SampleSource', 'GetSearchTemplate', { type: 'sample' })
+      service.postRequest('dashoo.biobank.bee-0.1', 'SampleRelated', 'GetSearchTemplate', { type: 'SampleSource' })
       // getSearchTemplate({ Type: 'sample' })
         .then(res => {
-          if (res.info && res.info.items && res.info.items.length > 0) {
-            _this.searchTemplates = res.info.items.map(function (e) {
-              e.Fields = JSON.parse(e.Template)
+          console.log('searchTemplates', _this.searchTemplates)
+          if (res.data && res.data.length > 0) {
+            _this.searchTemplates = res.data.map(function (e) {
+              e.Fields = JSON.parse(e.template)
               return e
             })
+            console.log('searchTemplates', _this.searchTemplates)
+            console.log('_this.searchTemplates[0].name', _this.searchTemplates[0].name)
             // //当前搜索模板的I
 
-            _this.currentSearchId = _this.searchTemplates[0].Id
-            _this.currentSearchTemplateName = _this.searchTemplates[0].Name
+            _this.currentSearchId = _this.searchTemplates[0].id
+            _this.currentSearchTemplateName = _this.searchTemplates[0].name
             // console.log(_this.searchTemplates, 'searchTemplatessearchTemplatessearchTemplates')
             // console.log(this.searchTemplates[0].Fields, "this.searchTemplates[0].Fields")
             _this.searchTableData = this.getSearchTableData(this.searchTemplates[0].Fields)
@@ -669,6 +674,9 @@ export default {
         _this.currentSearchTemplate = _this.currentSearchTemplateName
         _this.searchWithTemplate(_this.currentSearchTemplateName)
       })
+    },
+    searchWithTemplate () {
+
     },
     // 自定义搜索名称发生变化
     customsearchnamechange () {
@@ -686,6 +694,10 @@ export default {
     saveSearchTemplate () {
       let _this = this
       if (!this.searchTableData.length > 0) {
+        this.$message({
+          type: 'warning',
+          message: '添加自定义查询条件'
+        })
         return
       }
       if (this.currentSearchTemplateName === '') {
@@ -757,13 +769,13 @@ export default {
       // console.log(template, 'BBBBBBBBB')
 
       // 保存确定
-      service.postRequest('dashoo.biobank.bee-0.1', 'SampleRelated', 'SaveSearchTemplate', {name: this.currentSearchTemplateName, template: template, type: 'SampleSource'})
+      service.postRequest('dashoo.biobank.bee-0.1', 'SampleRelated', 'SaveSearchTemplate', {id: this.currentSearchId, name: this.currentSearchTemplateName, template: template, type: 'SampleSource'})
       // putSearchTemplate(this.currentSearchTemplateName, this.currentSearchId, template, 'sample')
         .then(res => {
-          if (res.info.code === 0) {
+          if (res.code === 0) {
             _this.$message({
               type: 'success',
-              message: res.info.message
+              message: res.msg
             })
             this.getAllSearchTab()
             _this.closePopup()
@@ -771,7 +783,7 @@ export default {
           } else {
             _this.$message({
               type: 'warning',
-              message: res.info.message
+              message: res.msg
             })
           }
         })
@@ -781,12 +793,13 @@ export default {
         })
       // _this.resetcustomcondition()
     },
-    clickmodeltypetag (val) {
+    clickmodeltypetag (name, id) {
       // this.currentSearchTemplateName = val.getAttribute('id')
-      this.currentSearchTemplateName = val
+      this.currentSearchTemplateName = name
+      this.currentSearchTemplateId = id
       for (let i = 0; i < this.searchTemplates.length; i++) {
-        if (this.searchTemplates[i].Name === this.currentSearchTemplateName) {
-          this.currentSearchId = this.searchTemplates[i].Id
+        if (this.searchTemplates[i].name === this.currentSearchTemplateName) {
+          this.currentSearchId = this.searchTemplates[i].id
           this.searchTableData = this.getSearchTableData(this.searchTemplates[i].Fields)
         }
       }

src/dashoo.cn/frontend_animal/src/pages/biobank/source/animal.vue

@@ -405,29 +405,7 @@ export default {
       console.log('params', params)
       store.set('samplestoredseach', params)
       console.log('jlw', store.get('samplestoredseach'))
-      service.postRequest('dashoo.biobank.bee-0.1', 'SampleRelated', 'GetSearchTemplate', {type: 'SampleSource'})
-        .then(res => {
-          console.log('res.data', res.data)
-          if (res.data && res.data.length > 0) {
-            _this.searchTemplates = res.data.map(function (e) {
-              e.Fields = JSON.parse(e.template)
-              return e
-            })
-            console.log('_this.searchTemplates', _this.searchTemplates)
-            // //当前搜索模板的I
-
-            _this.currentSearchId = _this.searchTemplates[0].Id
-            _this.currentSearchTemplateName = _this.searchTemplates[0].Name
-            // console.log(_this.searchTemplates, 'searchTemplatessearchTemplatessearchTemplates')
-            // console.log(this.searchTemplates[0].Fields, "this.searchTemplates[0].Fields")
-            _this.searchTableData = this.getSearchTableData(this.searchTemplates[0].Fields)
-          } else {
-            // _this.$message({
-            //   type: 'warning',
-            //   message: res.data.message,
-            // })
-          }
-        })
+      _this.getAllSearchTab()
       _this.$axios.get('/samplessource/animallist?SurveyDate=' + SurveyDate.join(',') + '&CreateOn=' +
         CreateOn.join(','), {
         params
@@ -529,21 +507,27 @@ export default {
     getAllSearchTab () {
       let _this = this
       // getSearchTemplate({ Type: 'sample' })
-      service.postRequest('dashoo.biobank.bee-0.1', 'SampleRelated', 'ExportExcel', { type: 'sample' })
+      service.postRequest('dashoo.biobank.bee-0.1', 'SampleRelated', 'GetSearchTemplate', {type: 'SampleSource'})
         .then(res => {
-          if (res.info && res.info.items && res.info.items.length > 0) {
-            _this.searchTemplates = res.info.items.map(function (e) {
+          console.log('res.data', res.data)
+          if (res.data && res.data.length > 0) {
+            _this.searchTemplates = res.data.map(function (e) {
               e.Fields = JSON.parse(e.template)
               return e
             })
+            console.log('_this.searchTemplates', _this.searchTemplates)
+            // //当前搜索模板的I
+
+            _this.currentSearchId = _this.searchTemplates[0].Id
             _this.currentSearchTemplateName = _this.searchTemplates[0].Name
+            // console.log(_this.searchTemplates, 'searchTemplatessearchTemplatessearchTemplates')
+            // console.log(this.searchTemplates[0].Fields, "this.searchTemplates[0].Fields")
             _this.searchTableData = this.getSearchTableData(this.searchTemplates[0].Fields)
           } else {
             // _this.$message({
             //   type: 'warning',
             //   message: res.data.message,
             // })
-            _this.searchTemplates = []
           }
         })
         .catch(err => {
@@ -639,6 +623,18 @@ export default {
       } else if (command == 'clear') {
         this.clearSearch()
       } else {
+        // TODO 样本模板查询微服务
+        let params = {
+          currentPage: 1,
+          size: 200,
+          template: command,
+          isDelete: 0,
+          type: 'SampleSource'
+        }
+        console.log(params)
+        service.postRequest('dashoo.biobank.bee-0.1', 'SampleRelated', 'SearchByTemplate', params).then(res => {
+          console.log('params', res)
+        })
         this.currentSearchTemplate = command
         /* let searchmodel = {
           searchWithTemplate: command
@@ -834,7 +830,6 @@ export default {
       service.downloadExcel('dashoo.biobank.bee-0.1', 'SampleRelated', 'ExportExcel', name, params)
     },
     exportSamples () {
-      // TODO 后台：所有样本来源创建一个sheet表，根据不同样本来源排序
       const dateInfo = this.formatExportDate(new Date())
       let _this = this
       let id = ''