手动查找模态框样式

src/pages/regulatoryRepository/accessStandardsAndRegulations/page/listTracking.vue

@@ -148,7 +148,7 @@
                 clearable
             />
 <!--            :disabled="this.addOrEdit !== 'add'"-->
-            <el-button type="primary" size="mini" @click="">手动查找</el-button>
+            <el-button type="primary" size="mini" @click="handleSelect">手动查找</el-button>
           </el-form-item>
           <el-form-item
               label="标准名称/政策名称"
@@ -267,6 +267,116 @@
         >
       </div>
     </el-drawer>
+    <el-drawer
+        :title="handleSelectTitle"
+        :wrapperClosable="false"
+        :visible.sync="selectModal"
+        size="1250px"
+        :styles="styles"
+        :close="cancelSelectModel">
+      <div class="demo-drawer-content">
+        <el-form
+            class="label-input-form"
+            style="margin-top: 15px;"
+            label-width="130px"
+            :modal="handleSelectForm"
+            :inline="true"
+        >
+          <el-form-item label="标准/政策来源" class="search-item">
+            <el-select
+                v-model="handleSelectForm.dataSource"
+                :popper-append-to-body="false"
+                placeholder="请选择标准/政策来源">
+              <el-option value="INLAND_STAND" label="国内标准库"></el-option>
+              <el-option value="FOREIGN_STAND" label="海外标准库"></el-option>
+              <el-option value="FOREIGN_LAWS" label="国内外政策库"></el-option>
+              <el-option value="BUSINESS_STAND" label="企业标准库"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标准编号/政策编号" class="search-item">
+            <el-input
+                v-model="handleSelectForm.lawNumber"
+                placeholder="根据标准编号/政策编号查找"
+                clearable
+                :maxlength="100"></el-input>
+          </el-form-item>
+          <el-form-item label="标准名称/政策名称" class="search-item">
+            <el-input
+                v-model="handleSelectForm.lawName"
+                placeholder="根据标准名称/政策名称查找"
+                clearable
+                :maxlength="100"></el-input>
+          </el-form-item>
+          <el-form-item class="search-item btn-box">
+            <el-button
+                icon="el-icon-search"
+                type="primary"
+                class="common-button-primary"
+                round
+                @click="searchLawBtn">
+            </el-button>
+          </el-form-item>
+          <el-form-item class="search-item btn-box">
+            <el-button
+                class="common-button-default"
+                icon="el-icon-refresh-left"
+                round
+                type="default"
+                @click="clearLawBtn"></el-button>
+          </el-form-item>
+        </el-form>
+        <el-table
+            ref="selections"
+            tooltip-effect="dark"
+            style="width: 100%;overflow-y: auto;overflow-x: hidden;"
+            border
+            :height="300"
+            :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
+          fontWeight: 'bold', height: '48px'}"
+            @selection-change="handleSelectTableChange"
+        >
+          <el-table-column
+              type="selection"
+              width="55"
+              align="center">
+          </el-table-column>
+          <el-table-column
+              width="350"
+              align="center"
+              label="标准编号/政策编号">
+            <template slot-scope="scope">
+              <a v-if="scope.row.standYear" class="table-jump">{{ scope.row.standSort }} {{ scope.row.standNumber }}-{{ scope.row.standYear }}</a>
+              <a v-else class="table-jump">{{ scope.row.standSort }} {{ scope.row.standNumber }}</a>
+            </template>
+          </el-table-column>
+          <el-table-column
+              prop="lawName"
+              align="center"
+              label="标准名称/政策名称">
+          </el-table-column>
+          <el-table-column
+              prop="textStatus"
+              align="center"
+              label="标准状态"
+              width="350">
+            <template slot-scope="scope">
+              <span>{{ textStatusMap[scope.row.textStatus] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页-->
+        <pagination
+            style="position: relative;"
+            :page="handleSelectPage"
+            :total="handleSelectTotal"
+            @pageChange="handleSelectPageChange"
+            @pageSizeChange="handleSelectPageSizeChange"></pagination>
+        <div slot="footer" class="demo-drawer-footer">
+          <el-button class="common-button-default" round icon="el-icon-close" @click="selectModal = false">取消</el-button>
+          <el-button type="primary" round class="common-button-primary" icon="el-icon-check" @click="handleSelectConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -275,6 +385,26 @@ export default {
   name: "listTracking",
   data () {
     return {
+      handleSelectPage: 1,
+      handleSelectTotal: 0,
+      textStatusMap: {}, // 文本状态id与name对应
+      handleSelectTableList:[],
+      handleSelectForm: {
+        dataSource: '',
+        lawNumber: '', // 标准编号/政策编号
+        lawName: '', // 标准名称/政策名称
+        page: 1,
+        pageSize: this.$store.getters.userInfo.configContent,
+        total: 0,
+        standType: 'INLAND',
+        quoteIdList: '',
+        validFlag: '0',
+        menuId: 'nomenu'
+      },
+      //手动查找模态框的标题
+      handleSelectTitle: '手动查找',
+      //手动查找的模态框
+      selectModal: false,
       submitLoading: false,
       attrTypeOptions: [
         { label: '下拉选项', value: 'SEL_OPTION' },
@@ -398,6 +528,20 @@ export default {
     }
   },
   methods: {
+    handleSelectPageChange(page){
+
+    },
+    handleSelectPageSizeChange(pageSize){
+
+    },
+    // 手动查找 table选择事件
+    handleSelectTableChange (row) {
+      this.handleSelectTableList = row
+    },
+    //点击手动查找按钮
+    handleSelect() {
+      this.selectModal = true
+    },
     saveInfo () {
       this.$refs['attributeEO'].validate((valid) => {
         if (valid) {
@@ -448,6 +592,20 @@ export default {
           }
       })
     },
+    cancelSelectModel () {
+      // this.$nextTick(() => {
+      //   this.$refs['attributeEO'].resetFields()
+      //   this.attributeEO = {
+      //     id: '',
+      //     lawId: '',
+      //     lawName: '',
+      //     productType: '',
+      //     implTime: '',
+      //     implRequire: '',
+      //   }
+      // })
+      this.selectModal = false
+    },
     cancelModel () {
       this.$nextTick(() => {
         this.$refs['attributeEO'].resetFields()
@@ -639,6 +797,9 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
+    /deep/.el-form-item__label{
+      color: #333333;
+    }
   .container {
     display: flex;
     flex-direction: column;