船名

src/views/iosBasicData/bvessels/index.vue

@@ -26,8 +26,44 @@
       <!-- <template slot-scope="scope" slot="status">
         <el-checkbox v-model="scope.row.status" :true-label="0" :false-label="1" @change="putStatus(scope.row)">启用</el-checkbox>
       </template> -->
+      <!-- <template slot-scope="scope" slot="extendedDataArr">
+            <span style="color: #1e9fff" @click="extendedDataview(scope.row)">
+                {{scope.row.extendedDataArr.length}}
+            </span>
+        </template>
+        <template slot-scope="{type,disabled,row}" slot="extendedDataArrForm">
+            <el-button type="primary"
+                       size="small"
+                       @click="dialogVisible = true">EDI CODE
+            </el-button>
+        </template> -->
+      <template slot="code" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.code" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
+      <template slot="cnName" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.cnName" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
+      <template slot="enName" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.enName" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
+      <template slot="cntyCode" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.enName" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
+      <template slot="cntyName" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.enName" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
       <template slot="remarks" slot-scope="scope">
-        <avue-text-ellipsis :text="scope.row.remarks" :height="30">
+        <avue-text-ellipsis :text="scope.row.remarks" :height="30" use-tooltip placement="top">
           <small slot="more">...</small>
         </avue-text-ellipsis>
       </template>
@@ -41,6 +77,62 @@
         </el-button>
       </template>
     </avue-crud>
+
+    <el-dialog
+          title="EDI CODE"
+          :visible.sync="dialogVisible"
+          width="50%"
+          append-to-body
+          :destroy-on-close="true"
+          :modal-append-to-body="false"
+          :before-close="handleClose">
+          <div>
+              <el-button type="primary"
+                         size="small"
+                         :disabled="extendedDisabled"
+                         @click="extendedDataAdd">新增
+              </el-button>
+              <el-table
+                  :data="form.extendedDataArr"
+                  style="width: 100%">
+                  <el-table-column
+                      prop="name"
+                      label="名称">
+                      <template slot-scope="{row}">
+                          <el-input v-if="row.edit" size="mini" v-model="row.name" placeholder="请输入名称"></el-input>
+                          <span v-else>{{row.name}}</span>
+                      </template>
+                  </el-table-column>
+                  <el-table-column
+                      prop="value"
+                      label="键值">
+                      <template slot-scope="{row}">
+                          <el-input v-if="row.edit" size="mini" v-model="row.value" placeholder="请输入键值"></el-input>
+                          <span v-else>{{row.value}}</span>
+                      </template>
+                  </el-table-column>
+                  <el-table-column label="操作">
+                      <template slot-scope="scope">
+                          <el-button
+                              type="text"
+                              size="mini"
+                              :disabled="extendedDisabled"
+                              @click="extendedDataEdit(scope.$index, scope.row)">{{scope.row.edit?'保存':'编辑'}}</el-button>
+                          <el-button
+                              size="mini"
+                              type="text"
+                              :disabled="extendedDisabled"
+                              @click="extendedDataDelete(scope.$index, scope.row)">删除</el-button>
+                      </template>
+                  </el-table-column>
+              </el-table>
+          </div>
+          <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false;extendedDisabled = false">取 消</el-button>
+                <el-button type="primary" @click="dialogVisible = false;extendedDisabled = false">确 定</el-button>
+          </span>
+      </el-dialog>
+
   </basic-container>
 </template>
 
@@ -51,6 +143,12 @@
   export default {
     data() {
       return {
+          // 扩展数据弹窗
+          dialogVisible:false,
+
+        form: {
+            extendedDataArr:[]
+        },
         form: {},
         query: {},
         loading: true,
@@ -161,6 +259,7 @@
               label: "船舶编码",
               prop: "code",
               search: true,
+              slot: true,
               rules: [{
                 required: true,
                 message: "请输入船舶编码",
@@ -171,6 +270,7 @@
               label: "中文船名",
               prop: "cnName",
               search: true,
+              slot: true,
               rules: [{
                 required: true,
                 message: "请输入中文船名",
@@ -181,6 +281,7 @@
               label: "英文船名",
               prop: "enName",
               search: true,
+              slot: true,
               rules: [{
                 required: true,
                 message: "请输入英文船名",
@@ -191,6 +292,7 @@
               label: "船舶注册国家代码",
               prop: "cntyCode",
               search: true,
+              slot: true,
               width: "120"
               // rules: [{
               //   required: true,
@@ -202,6 +304,7 @@
               label: "船舶注册国家名称",
               prop: "cntyName",
               search: true,
+              slot: true,
               width: "120"
               // rules: [{
               //   required: true,
@@ -304,6 +407,18 @@
               }]
             },
             // {
+            //       label: "EDI CODE",
+            //       prop: "extendedDataArr",
+            //       type:'tree',
+            //       formslot:true,
+            //       dicData:[],
+            //       rules: [{
+            //           required: true,
+            //           message: "请输入EDI CODE",
+            //           trigger: "blur"
+            //       }]
+            // },
+            // {
             //   label: "JSON 对象数组，用于不查询的扩展数据, 例如：[{name: "key1", value: "value1"}]",
             //   prop: "extendedData",
             //   rules: [{
@@ -383,6 +498,39 @@
         this.option = await this.getColumnData(this.getColumnName(293), this.optionBack);
     },
     methods: {
+      // 扩展数据详情的---------------------------------------
+        // 扩展数据添加
+        extendedDataAdd(){
+            this.form.extendedDataArr.map(item=>{
+                item.edit = false
+            })
+            this.form.extendedDataArr.push({
+                edit:true
+            })
+        },
+        // 扩展数据编辑
+        extendedDataEdit(index,row) {
+            row.edit = !row.edit
+        },
+        // 扩展数据删除
+        extendedDataDelete(index,row) {
+            this.form.extendedDataArr.splice(index,1)
+        },
+        // 扩展数据表格点击查询详情
+        extendedDataview(row){
+            this.form = row
+            this.extendedDisabled = true
+            this.dialogVisible = true
+        },
+        // 扩展数据弹窗关闭
+        handleClose(done){
+            this.$confirm('确认关闭？')
+                .then(_ => {
+                    done();
+                })
+                .catch(_ => {});
+        },
+        // 表格操作------------------------------------------------------------
       rowSave(row, done, loading) {
         addBvessels(row).then(() => {
           this.onLoad(this.page);
@@ -396,26 +544,6 @@
           window.console.log(error);
         });
       },
-      putStatus(row) {
-        console.log(row.status);
-        if (row.status == 0) {
-          row.status = 1
-        } else if (row.status == 1) {
-          row.status = 0
-        }
-        updateBvessels(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-        }, error => {
-          loading();
-          console.log(error);
-        });
-        // this.$forceUpdate
-
-      },
       rowUpdate(row, index, done, loading) {
         // if (row.status === 1) {
           updateBvessels(row).then(() => {
@@ -436,6 +564,26 @@
         //   });
         // }
       },
+      // putStatus(row) {
+      //   console.log(row.status);
+      //   if (row.status == 0) {
+      //     row.status = 1
+      //   } else if (row.status == 1) {
+      //     row.status = 0
+      //   }
+      //   updateBvessels(row).then(() => {
+      //     this.onLoad(this.page);
+      //     this.$message({
+      //       type: "success",
+      //       message: "操作成功!"
+      //     });
+      //   }, error => {
+      //     loading();
+      //     console.log(error);
+      //   });
+      //   // this.$forceUpdate
+
+      // },
       rowDel(row) {
         if (row.status === 1) {
           this.$confirm("确定将选择数据删除?", {