标签项列表修改

2022-02-18 09:32:07 +08:00
parent 12eeb7e8a7
commit c898d3eb4f
6 changed files with 259 additions and 124 deletions
@@ -16,7 +16,7 @@
          <a-button type="primary" class="dic-list-add" @click="dicAdd">{{$t('add')}}</a-button>
        </div>
        <div class="dic-list-table">
-          <list-table v-if="dictVal=='list'" :tableData="tableData" @editDict="editDict"></list-table>
+          <list-table v-if="dictVal=='list'" :tableData="tableData" @editDict="editDict" @deleteDict="deleteDict"></list-table>
          <tree-table v-if="dictVal=='tree'" :tabletreeData="tabletreeData" @editDict="editTreeDict"></tree-table>
        </div>
        <a-modal class="dict-module" v-model="newVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="newVisible">
@@ -30,8 +30,8 @@
            :wrapper-col="wrapperCol"

          >
-            <a-form-model-item label="名称" prop="name">
-              <a-input v-model="form.name" placeholder="请输入名称" />
+            <a-form-model-item label="名称" prop="itemText">
+              <a-input v-model="form.itemText" placeholder="请输入名称" />
            </a-form-model-item>
            <a-form-model-item label="英文名称" prop="enName">
              <a-input v-model="form.enName" placeholder="请输入英文名称" />
@@ -50,8 +50,8 @@
                </span>
              </a-tree-select>
            </a-form-model-item>
-            <a-form-model-item label="描述" prop="describe">
-              <a-input v-model="form.describe" placeholder="请输入描述" />
+            <a-form-model-item label="描述" prop="description">
+              <a-input v-model="form.description" placeholder="请输入描述" />
            </a-form-model-item>

          </a-form-model>
@@ -61,6 +61,8 @@
 </template>

 <script>
+
+  import { getAction, postAction, deleteAction } from '@/api/manage'
  import listTable from './listTable'
  import treeTable from './treeTable'
  export default {
@@ -71,7 +73,7 @@
    },
    props:{
      dictVal:String,
-
+      record:Object
    },
    data(){
      return{
@@ -80,14 +82,14 @@
        form:{},
        newVisible:false,
        rules:{
-            name:[
+            itemText:[
              { required: true, message: '请输入展示区域', trigger: 'blur' },
              { min:1, max: 30, message: '长度在 1 - 30字符', trigger: 'blur' },
            ],
            enName:[
              { min:1, max: 100, message: '长度在 1 - 100字符', trigger: 'blur' },
            ],
-            describe:[
+            description:[
              { min:1, max: 300, message: '长度在 1 - 300字符', trigger: 'blur' },
            ]
        },
@@ -144,9 +146,22 @@
      },
    },
    mounted() {
-      console.log(this.dictVal)
+      // this.loadData()
    },
    methods:{
+      //获取列表数据
+      loadData(){
+        let params={
+          dictId:this.record.id
+        }
+        getAction(`sys/dictItem/page`,params).then(res=>{
+          if(res.success){
+            if(this.dictVal=='list'){
+              this.tableData=[...res.result.records]
+            }
+          }
+        })
+      },
      //搜索
      search(){

@@ -174,7 +189,8 @@
        this.newVisible=false;
      },
      //列表编辑
-      editDict(val){
+      editDict(rec,val){
+        this.form={...rec}
        this.newVisible=val
        this.parentVisible=false
      },
@@ -182,6 +198,17 @@
      editTreeDict(val){
        this.newVisible=val
        this.parentVisible=true
+      },
+      //列表删除
+      deleteDict(val){
+        let params={
+          id:val
+        }
+         deleteAction(`sys/dictItem/delete`,params).then(res=>{
+            if(res.success){
+              this.loadData()
+            }
+         })
      }
    }
  }
@@ -1,6 +1,6 @@
 <template>
    <div class="list-table">
-      <a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="tag-con-table">
+      <a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" class="tag-con-table">

        <template slot="action" slot-scope="text, record">
          <a class="action-edit" href="javascript:;" @click="actionEdit(record)">编辑</a>
@@ -13,6 +13,17 @@
          </a-popconfirm>
        </template>
      </a-table>
+      <div class="page" v-if="tableData.length > 0">
+        <a-pagination
+          :show-total="total => `共 ${total} 条`"
+          show-quick-jumper
+          show-size-changer
+          :page-size.sync="queryParams.pageSize"
+          :total="total"
+          @change="onChangePage"
+          @showSizeChange="SizeChange"
+        />
+      </div>
    </div>
 </template>

@@ -20,17 +31,23 @@
  export default {
    name: 'listTable',
    props:{
-      tableData:Array,
+      // tableData:Array,

    },
    data(){
      return{
+        tableData:[],
        selectedRowKeys:[],
+        total:0,
+        queryParams:{
+          pageNo:1,
+          pageSize:10
+        },   //搜索条件
        columns: [
          {
            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
+            dataIndex: 'itemText',
+            key: 'itemText',
            align: "center",
            width: 100,
          },
@@ -44,7 +61,7 @@
            title: '描述',
            align: "center",
            width: 100,
-            dataIndex: 'describe',
+            dataIndex: 'description',
          },
          {
            title: this.$t('operation'),
@@ -57,21 +74,43 @@
      }
    },
    mounted() {
-
+      this.loadData()
    },
    methods:{
+      //获取列表数据
+      loadData(){
+        let params={
+          ...this.queryParams,
+          dictId:this.record.id
+        }
+        getAction(`sys/dictItem/page`,params).then(res=>{
+          if(res.success){
+              this.tableData=[...res.result.records]
+          }
+        })
+      },
      //编辑
      actionEdit(val){
-        this.$emit('editDict',true)
+        this.$emit('editDict',val,true)
      },
      //删除
      onDelete(val){
-
+        this.$emit('deleteDict',val.id,true)
      },
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },
+      //点击页数
+      onChangePage(page,pageSize){
+        this.queryParams.pageNo = page
+        this.loadData()
+      },
+      //一页显示条数
+      SizeChange(page,pageSize){
+        this.queryParams.pageSize = pageSize
+        this.loadData()
+      },
    }
  }
 </script>
@@ -86,5 +125,8 @@
        color:red;
      }
    }
+    .page{
+      margin-top: 20px;
+    }
  }
 </style>
@@ -14,10 +14,10 @@
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle">属性名称</span>
      <span slot="action" slot-scope="text, record">
-          <a @click="editVisible(record.id)">编辑</a>
+          <a @click="editVisible(record.id)" v-if="record.isReadOnly==0">编辑</a>
          <a-divider type="vertical" />
        <a-popconfirm
-          v-if="tableData.length"
+          v-if="tableData.length&&record.isReadOnly==0"
          title="Sure to delete?"
          @confirm="() => deleteVisible(record.id)"
        >
@@ -1,113 +1,122 @@
 <template>
  <div class="tag-content">
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="24">
-          <a-col :md="6" :sm="12">
-            <a-form-item :label="'标签项名称'">
-              <j-input :placeholder="'请输入标签名称'" v-model="queryParam.tagName"></j-input>
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="8">
+    <a-card>
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="12">
+              <a-form-item :label="'标签项名称'">
+                <j-input :placeholder="'请输入标签名称'" v-model="queryParams.dictName"></j-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{$t('query')}}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('reset')}}</a-button>
            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    <div class="table-operator" style="border-top: 5px">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-    </div>
-    <a-modal class="show-content" v-model="contentVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="contentVisible">
-      <a-form-model
-        class="tag-content"
-        ref="ruleForm"
-        :model="form"
-        :rules="rules"
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-      >
-        <a-form-model-item ref="tagName" label="标签名称" prop="tagName">
-          <a-input
-            v-model="form.tagName"
-            @blur="
-          () => {
-            $refs.tagName.onFieldBlur();
-          }
-        "
-          />
-        </a-form-model-item>
-        <a-form-model-item label="标签类型" prop="tagType">
-          <j-dict-select-tag type="list" v-model="form.tagType" dictCode="attribute_type" placeholder="请选择标签类型" />
-        </a-form-model-item>
-
-        <a-form-model-item ref="describe" label="描述" prop="describe">
-          <a-input
-            v-model="form.describe"
-            @blur="
-          () => {
-            $refs.describe.onFieldBlur();
-          }
-        "
-          />
-        </a-form-model-item>
-      </a-form-model>
-    </a-modal>
-
-    <a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="tag-con-table">
-
-      <template slot="action" slot-scope="text, record">
-        <a-popover placement="right" v-model="typeVisible[record.key]" trigger="click">
-          <template slot="content"  class="type-popover-content">
-            <div class="type-popover">
-              <p class="type type-input" @click="handleDicPop(record,'list')">下拉选择</p>
-              <p class="type type-select" @click="handleDicPop(record,'tree')">树状结构</p>
-            </div>
-          </template>
-          <a class="action-dict" href="javascript:;">字典配置</a>
-        </a-popover>
-        <a class="action-edit" href="javascript:;" @click="actionEdit(record)">编辑</a>
-        <a-popconfirm
-          v-if="tableData.length"
-          title="Sure to delete?"
-          @confirm="() => onDelete(record)"
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <div class="table-operator" style="border-top: 5px">
+        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      </div>
+      <a-modal class="show-content" v-model="contentVisible" :visible="contentVisible" title="新增" ok-text="保存" cancel-text="取消" @ok="hideModal" @cancel="cancelModel" v-if="contentVisible">
+        <a-form-model
+          class="tag-content"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
        >
-          <a class="action-delete" href="javascript:;">删除</a>
-        </a-popconfirm>
-      </template>
-    </a-table>
-    <a-drawer
-      class="dict-drawer"
-      title="字典列表"
-      placement="right"
-      :closable="true"
-      :visible="dicVisible"
-      :after-visible-change="afterDicVisibleChange"
-      @close="onDicClose"
-      width="1000px"
-    >
-      <dic-list :dictVal="dictVal" v-if="dicVisible"></dic-list>
-    </a-drawer>
+          <a-form-model-item ref="tagName" label="标签名称" prop="dictName">
+            <a-input
+              v-model="form.dictName"
+              placeholder="请输入标签名称"
+            />
+          </a-form-model-item>
+          <a-form-model-item label="标签类型" prop="fieldShowType">
+            <j-dict-select-tag type="list" v-model="form.fieldShowType" dictCode="field_show_type" placeholder="请选择标签类型" />
+          </a-form-model-item>

-<!--    <tab-table :tableData="tableData" :columns="columns"></tab-table>-->
+          <a-form-model-item ref="describe" label="描述" prop="description">
+            <a-input
+              v-model="form.description"
+              placeholder="请输入描述"
+            />
+          </a-form-model-item>
+        </a-form-model>
+      </a-modal>
+
+      <a-table bordered :data-source="tableData" :columns="columns" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" class="tag-con-table">
+
+        <template slot="action" slot-scope="text, record">
+          <a-popover placement="right" v-model="typeVisible[record.id]" trigger="click">
+            <template slot="content"  class="type-popover-content">
+              <div class="type-popover">
+                <p class="type type-input" @click="handleDicPop(record,'list')">下拉选择</p>
+                <p class="type type-select" @click="handleDicPop(record,'tree')">树状结构</p>
+              </div>
+            </template>
+            <a class="action-dict" href="javascript:;">字典配置</a>
+          </a-popover>
+          <a class="action-edit" href="javascript:;" @click="actionEdit(record)">编辑</a>
+          <a-popconfirm
+            v-if="tableData.length"
+            title="Sure to delete?"
+            @confirm="() => onDelete(record)"
+          >
+            <a class="action-delete" href="javascript:;">删除</a>
+          </a-popconfirm>
+        </template>
+      </a-table>
+      <div class="page" v-if="tableData.length > 0">
+        <a-pagination
+          :show-total="total => `共 ${total} 条`"
+          show-quick-jumper
+          show-size-changer
+          :page-size.sync="queryParams.pageSize"
+          :total="total"
+          @change="onChangePage"
+          @showSizeChange="SizeChange"
+        />
+      </div>
+      <a-drawer
+        class="dict-drawer"
+        title="字典列表"
+        placement="right"
+        :closable="true"
+        :visible="dicVisible"
+        v-if="dicVisible"
+        :after-visible-change="afterDicVisibleChange"
+        @close="onDicClose"
+        width="1000px"
+      >
+        <dic-list :dictVal="dictVal" :record="record" v-if="dicVisible"></dic-list>
+      </a-drawer>
+
+      <!--    <tab-table :tableData="tableData" :columns="columns"></tab-table>-->
+    </a-card>
  </div>
 </template>

 <script>
-  import tabTable from './tabTable'
+  import { getAction, postAction, deleteAction } from '@/api/manage'
+  // import tabTable from './tabTable'
  import dicList from '../dialog/dicList'
  export default {
    name: 'tagContent',
    components:{
-      tabTable,
+      // tabTable,
      dicList
    },
    data(){
      return{
-        queryParam:{
-          tagName:'',
+        total:0,
+        queryParams:{
+          pageNo:1,
+          pageSize:10
        },
        selectedRowKeys: [],
        contentVisible:false,
@@ -128,8 +137,8 @@
        columns: [
          {
            title: '标签名称',
-            dataIndex: 'tagName',
-            key: 'tagName',
+            dataIndex: 'dictName',
+            key: 'dictName',
            align: "center",
            width: 100,
          },
@@ -137,13 +146,13 @@
            title: '标签类型',
            align: "center",
            width: 100,
-            dataIndex: 'tagType',
+            dataIndex: 'fieldShowType',
          },
          {
            title: '描述',
            align: "center",
            width: 100,
-            dataIndex: 'describe',
+            dataIndex: 'description',
          },
          {
            title: this.$t('operation'),
@@ -157,9 +166,9 @@
        wrapperCol: { span: 18 },
        form:{},
        rules:{
-          tagName:[{ required: true, message: '请输入标签名称', trigger: 'change' },
+          dictName:[{ required: true, message: '请输入标签名称', trigger: 'change' },
            { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' }],
-          tagType:[
+          fieldShowType:[
            { required: true, message: '请选择标签类型', trigger: 'blur' },

          ],
@@ -167,31 +176,63 @@
        typeVisible:{},
        dicVisible:false,
        dictVal:'',
-
+        record: {  }
      }
    },
    computed:{

    },
    mounted() {
-
+      this.loadData();
    },
    methods:{
+      //获取列表数据
+      loadData(param){
+        let params={
+          ...this.queryParams,
+          is_tag_dict:1,
+        }
+        getAction(`sys/dict/page`,params).then(res=>{
+          if(res.success){
+            this.total=res.result.total
+            this.tableData=[...res.result.records]
+          }
+        })
+      },
+      //查询
      searchQuery(){

+        this.loadData()
      },
      searchReset(){
-
+        this.queryParams={
+          pageNo:1,
+          pageSize: 10
+        }
+        this.loadData()
      },
      handleAdd(){
        this.contentVisible=true
+        this.form={}
      },
      hideModal(){
        // console.log('form',this.form)
+        let params={
+          ...this.form,
+          is_tag_dict: 1,
+          is_read_only:1
+        }
        this.$refs.ruleForm.validate((valid)=>{
          // console.log('valide',valide)
          if(valid){
-            this.contentVisible=false
+            postAction(`sys/dict/add`,params).then(res=>{
+              if(res.success){
+                this.loadData()
+                this.contentVisible=false
+                this.form={}
+              }
+            })
+
          }

        })
@@ -199,13 +240,21 @@
      },
      cancelModel(){
        this.contentVisible=false
+        this.form={}
      },
      onCellChange(){

      },
      //删除
      onDelete(val){
-        console.log('delval',val)
+        let param={
+          id:val.id
+        }
+        deleteAction(`sys/dict/delete`,param).then(res=>{
+          if(res.success){
+
+          }
+        })
      },
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
@@ -213,18 +262,20 @@
      },
      //编辑
      actionEdit(val){
+        this.form={...val}
        this.contentVisible=true
      },
      //字典配置
      handleDicPop(record,val){
+        this.record=record
        this.dictVal=val
        if(val=='list'){
-          this.typeVisible[record.key]=false
+          this.typeVisible[record.id]=false
          this.dicVisible=true


        }else if(val == 'tree'){
-          this.typeVisible[record.key]=false
+          this.typeVisible[record.id]=false
          this.dicVisible=true

        }
@@ -236,6 +287,16 @@
      onDicClose() {
        this.dicVisible = false;
      },
+      //点击页数
+      onChangePage(page,pageSize){
+        this.queryParams.pageNo = page
+        this.loadData()
+      },
+      //一页显示条数
+      SizeChange(page,pageSize){
+        this.queryParams.pageSize = pageSize
+        this.loadData()
+      },
    }
  }
 </script>
@@ -251,6 +312,10 @@
      }

    }
+    .page{
+      margin-top: 20px;
+
+    }
  }
  .type-popover{
    p{
@@ -46,7 +46,7 @@
    <div class="tag-doc-tab">
      <a-tabs default-active-key="1" @change="callbackTab">
        <a-tab-pane key="1" tab="文档库">
-          <tabTable :tableData="tableData" :columns="taglabColumns" @visibleEd="visibleEd" @visibleDelete="visibleDelete"></tabTable>
+          <tabTable :tableData="tableData" :columns="taglabColumns" @visibleEd="visibleEd" @visibleDelete="visibleDelete" ></tabTable>
        </a-tab-pane>
        <a-tab-pane key="2" tab="文档拆分" force-render>
          <tabTable :tableData="tableData" :columns="tagSplit"></tabTable>
@@ -300,6 +300,7 @@
        // })
        deleteAction(`tag/onlCgformTag/delete`,params).then(res=>{
          if(res.success){
+            this.loadData(1)
            this.$message('删除成功')
          }
        })